I feel like there would have some default option to apply styling to one prop or the other but I don't see anything in the docs that would allow me to do that.
There's a style prop that I can use, but that applies styles to the entire component. Also the innerDivStyle prop only styles the enclosing wrapper div, not one or the other props/divs of the text itself.
<MenuItem className="foobar" style={{color:'red'}} innerDivStyle={{color:'blue'}} primaryText="My Primary text" secondaryText="My Secondary text" />
This component Renders to this:
<div>
<span class="foobar" tabindex="0" style="border: 10px; box-sizing: border-box; display: block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: 16px; font-weight: inherit; position: relative; color: red; line-height: 48px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; min-height: 48px; white-space: nowrap; background: none;">
<div>
<div style="margin-left: 0px; padding: 0px 16px; position: relative; color: blue;">
<div style="float: right;">My Secondary Text</div>
<div>My Primary Text</div>
</div>
</div>
</span>
</div>
Which doesn't seem to have any way to differentiate the two divs.
Of course I could probably use div:first-child or something but I feel like that would be a workaround to a fundamental problem or something I'm clearly missing.
Material-UI version: 0.16.0
So even though there's no example in the docs that uses this technique, I realized that the primaryText and secondaryText props expect a node object. This is usually just a string in almost every example but it can also be just a straight up element.
This is how you can style a separate prop.
<MenuItem primaryText="My Primary Text"
secondaryText={<span style={{ color: 'blue' }}>My Secondary Text</span>} />
Inline css is not recommended anymore, use isomorphic style-loader to embed css from a separate file.
Check : https://www.npmjs.com/package/isomorphic-style-loader
Related
I wanted to create Radio Input Buttons styled Cards.
I am using react js and ant design.
Tried to create my own native component using good old input type="radio".
Connecting them to antd forms wasen't smooth sailing, then I had another idea.
Using antd react Radio component and just passing a card component. That's the working result!
Usage.tsx
// Other Code
<Radio.Group onChange={onChange} value={value} className="cards-container">
<Radio value={FOCUS_LEVEL.Regular} className="radio-input-card-container">
<InputCard
title="First Card"
checked={value === CONSTANT1}
imgPath="../../assets/icon1.svg"
points={["This is a point explain why this card is the best!", "Wow this is also a great point"]} />
</Radio>
<Radio value={FOCUS_LEVEL.DeepFocus} className="radio-input-card-container">
<InputCard
title="Second Card"
checked={value === CONSTANT2}
imgPath="../../assets/icon2.svg"
points={["This point explains why this card is way better", "The other card as shitty points!"]} />
</Radio>
</Radio.Group>
// Other Code
Usage.scss
.cards-container {
display: flex;
justify-content: space-between;
margin-left: 20px;
}
InputCard.tsx
import React from "react"
import Title from "antd/lib/typography/Title";
import "./InputCard.scss"
export function InputCard({ title, checked, imgPath, points }): JSX.Element {
return (
<div className={checked ? "card checked" : "card"}>
<div className="header-container">
<Title className="card-title">{title}</Title>
<img src={imgPath} alt="regular focus"></img>
</div>
<ul>
{points.map((point) =>
<li key={point.toString()}>{point}</li>
)}
</ul>
</div >
);
}
InputCard.scss
.card {
height: 420px !important;
width: 360px !important;
position: relative !important;
left: -45px; // A work around. Placing the card under the native radio button
-webkit-appearance: none;
appearance: none;
border: 2px solid rgba(2,28,53,0.08);
border-radius: 14px;
box-shadow: 7px 7px 15px rgba(2,28,53,0.08);
cursor: pointer;
outline: none;
.header-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
ul {
padding: 0em 1em 0em 2.5em !important;
}
img {
margin: 0.5em 0em 1em 0em;
}
}
.card-title {
font-size: 20px !important;
margin-top: 16px !important;
}
.checked {
transition: border 0.5s ease;
border: 2px solid rgba(255,0,0,0.6);
}
The antd component creates a radio input circle right before the card childe. Moving the card to the left (left: -45px) so the card will include the radio circle is a workaround. I don't want to change too much in the parent component for me to use this InputCard component, and this is my try to do it within the component.
I'm working on a react JS app , and I'm using react-modal package . I don't know how to make the outside part of the Modal ,when it is opened, completely transparent .
This is the props that I pass it to the Modal :
<Modal
onRequestClose={() => {
this.setState({ modalIsOpen: false });
}}
isOpen={modalIsOpen}
className="Modal"
></Modal>
This is the CSS code :
.Modal {
text-decoration: none;
user-select: none;
align-self: center;
justify-content: center;
align-items: center;
border: 2px solid #040408;
border-radius: 30px;
background-color: white;
margin-top: 10%;
margin-bottom: auto;
width: 20.8%;
margin-left: auto;
margin-right: auto;
overflow-x: hidden;
outline: none;
padding-left: 2px;
padding-right: 2px;
}
And this is the result that I get :
I want my modal to look just like a popup.
Do you mean background of model to be transparent? like the grey part of picture? in this case you should put it inside another div.
<div className='transparent'><Modal/></div>
Otherwise I don't understand the question.
Maybe you want to make the div fixed and max size, so it cover all the screen.
I am trying to use React Emotion to set up a horizontal rule with text in the middle. It would look like this:
----------------------SOME TEXT----------------------------------
I found examples on StackOverflow on how to do this with CSS, but it's not working for me.
Here is my DIV that I'm using, but it's not working.
Is this possible to set up with react Emotion? What am I missing?
<div
css={{
display: 'flex',
lineHeight:'1em',
color:'gray',
'&:before, &:after': {
content:'',
display:'inline-block',
flexGrow:'1px',
marginTop:'0.5em',
backgroundColor:'gray',
height:'1px',
marginRight:'10px',
marginLeft:'10px'
}
}}
>
SOME TEXT
</div>
Your code is right about the ::before and ::after syntax,
However, when trying to replicate I found two errors:
The flexGrow shouldn't have a px unit, just 1: flexGrow:'1
The content should have double quotes content:'""'
<div
css={{
display: 'flex',
lineHeight:'1em',
color:'gray',
'&:before, &:after': {
content:'""',
display:'inline-block',
flexGrow:'1',
marginTop:'0.5em',
backgroundColor:'gray',
height:'1px',
marginRight:'10px',
marginLeft:'10px'
}
}}
>
You need pass style object in css function from emotion/css or emotion/react.
You forgot to wrap your styled object in a function from emotion.
If you use an object and not a string, then wrap content in double quotes
// First way, use css from #emotion/css, pass as object
import { css } from '#emotion/css'
<div
className={css({
display: 'flex',
lineHeight: '1em',
color: 'gray',
':before, :after': {
content: '""',
flexGrow: '1',
marginTop: '0.5em',
backgroundColor: 'gray',
height: '1px',
marginRight: '10px',
marginLeft: '10px'
}
})}
>
SOME TEXT
</div>
// Second way, use css from #emotion/css, pass as string
import { css } from '#emotion/css'
<div
className={css`
display: flex;
line-height: 1em;
color: gray;
:before, :after: {
content: '';
flex-grow: 1;
margin-top: 0.5em;
background-color: gray;
height: 1px;
margin-right: 10px;
margin-left: 10px;
}
`}
>
SOME TEXT
</div>
// Third way, use css from #emotion/react
import { css } from '#emotion/react'
<div
css={css`
display: flex;
line-height: 1em;
color: gray;
:before, :after: {
content: '';
flex-grow: 1;
margin-top: 0.5em;
background-color: gray;
height: 1px;
margin-right: 10px;
margin-left: 10px;
}
`}
>
SOME TEXT
</div>
For string interpolation passed for css function you can use it like
let highlight = css`
border: 1px solid grey;
&:after {
position: absolute;
}`;
I want to add a Floating Action Button (FAB) on my app. Where I want to adjust its width and height to reduce its size using css. Also the button does not show the edit icon inside the button as expected.
Below are the code that I tried,
Code Sandbox
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './profile/profile.css';
import ProfileInfo from './profile/profile';
ReactDOM.render(
<ProfileInfo />,
document.getElementById('root')
);
profile.js
import React from 'react';
import './profile.css';
import Fab from '#material-ui/core/Fab';
import Icon from '#material-ui/core/Icon';
class ProfileInfo extends React.Component{
render(){
return(
<div className='prof-main-container'>
<div className='prof-items-container'>
<div className='prof-pic-container'><img src="https://ik.imagekit.io/upgrad1/upgradlogo.png" className="prof-pic" alt="profile pic" /></div>
<div className='prof-info-data-container'>
<div className='user-name'>User Name</div>
<div className='posts-follows-container'>
{/* <span className='posts-follows-item-first'>Posts:6</span>
<span className='posts-follows-item'>Follows:4</span>
<span className='posts-follows-item'>Followed By:6</span> */}
<span>Posts:6</span>
<span className='posts-follows-item'>Follows:4</span>
<span>Followed By:6</span>
</div>
<div className='full-name-container'>
<div className='full-name'>UpGrad Education</div>
<div className='full-name-edit-btn'>
{/* <Button variant="fab" color="secondary" size='medium'>
Edit
</Button> */}
<Fab color="secondary" aria-label="Edit" className='edit-btn'>
<Icon>edit_icon</Icon>
</Fab>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default ProfileInfo
profile.css
.prof-main-container {
display: flex;
background-color: #5995DA; /* Blue */
padding: 20px 0;
}
.prof-items-container {
border: 1px solid #fff;
width: 100%;
display: flex;
/* justify-content: space-around; */
padding: 0% 20%;
/* padding-left: 500px; */
}
.prof-info-data-container{
display: flex;
/* justify-content: space-between; */
flex-direction: column;
margin: 0px 40px;
}
.prof-pic-container{
padding: 15px 0px 0px 0px;
}
.prof-pic{
width: 50px;
height: 50px;
}
.posts-follows-item{
margin: 0px 60px;
}
.posts-follows-container{
font-size: 11px;
margin: 2px 0px;
}
.full-name-container{
display: flex;
flex-direction: row;
}
.full-name{
font-size: 12px;
margin: 10px 0px;
}
.user-name{
font-size: 12px;
font-weight: bold;
margin: 5px 0px;
}
.full-name-edit-btn{
margin: 5px 20px;
}
.edit-btn{
width: 20px;
height: 20px;
}
The expected edit icon is as below.
But actually it is rendering as below. Note that, no edit icon is displaying inside the button as expected instead it is showing "EC" inside the button.Please ignore the background color here.
Also, I should be able to adjust the width and height of the below edit button to reduce its size.But I am not able to do it using css. I tried adding a class named "edit-btn" inside profile.css but it does not work.
Did you try using classes prop instead of className on your Fab element.
According to the documentation you should use the former.
Refer this link for the same :
Material UI FAB props
I have updated my answer. Your .edit-btn class will work fine if you give it more specificity. Refer my code sandbox for the same.
Regarding your <Icon> can you help me understand what is edit_icon?
code sandbox
Do give it a try and see if it works. Also please share what you have tried so far.Thanks!
I'm using react-modal
The documentation mentions that the modal should close when you click the overlay by default. Even if I set the shouldCloseOnOverlayClick prop to true, this still does not work.
I'm not aware of anything that might prevent that event from occurring.
In case this is relevant/indicative of anything (and I haven't figured out why this is showing), I noticed in Chrome Developer Tools that my modal's overlay and content nodes both have an undefined class. All the CSS classes I have used are defined and working as they should.
Here's the relevant JSX and CSS, please let me know if more context is required.
JSX:
return (
<div className="Modal">
<Modal
className={{
base: 'Modal-content' + ' Modal-InputError-videoURL'
}}
overlayClassName={{
base: 'Modal-overlay'
}}
isOpen={true}
contentLabel="Modal"
>
{props.message}
<br />
<br />
<br />
<button
className="Modal-button"
onClick={events.handleCloseModal}
>
Close
</button>
</Modal>
</div>
)
CSS classes:
.Modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.35);
z-index: 9998;
}
.Modal-content {
display: relative;
position: absolute;
top: 50%;
left: 50%;
border: 1px solid #ccc;
background: rgb(38,38,38);
border: 1.5px solid rgb(45,45,45);
overflow: auto;
border-radius: 1px;
outline: none;
z-index: 9999;
width: 400px;
margin-left: -150px;
margin-right: -150px;
padding: 24px;
line-height: 16px;
}
.Modal-InputError-videoURL {
height: 134px;
margin-bottom: -67px;
margin-top: -67px;
}
.Modal-button {
display: inline-block;
padding: 4px;
margin: 0;
}
I solved this problem by using onRequestClose (per the docs). It seems that react-modal doesn't store isOpen in its local state, so I provided a callback to onRequestClose that updates the state in the parent component, which is subsequently passed down to the modal as a prop.
http://reactcommunity.org/react-modal/examples/on_request_close.html
isOpen property is statically set to true. You should control its value by keeping isOpen value in your state.
isOpen = {this.state.isModelOpen}
And in handleCloseModal method you can set its value to false.
this.setState({isModelOpen: false})
I tried to use the modal in a certain component but the click overlay close was not working. Then, I moved the modal to the previous component parent, and it started work.
I guess it have to do with z-index, but I am not sure. Sorry for missing details.
Hope it helps you guys!