I have a Material UI component, and I am trying to custom style it using the CSS.
Following is the code:
<IconButton className="my-class">
<Close />
</IconButton>
CSS:
.my-class {
float: right;
margin-left: auto;
margin-right: 0;
}
But I am not able to style it, when I tried the following, it works:
<IconButton style={{ float: 'right', marginLeft: 'auto', marginRight: '0' }}>
<Close />
</IconButton>
Why I am not able to style the Material UI components using regular CSS?
Most CSS-in-JS solutions inject their styles at the bottom of the HTML <head>, which gives MUI precedence over your custom styles.
You need to use the StyledEngineProvider exported from #mui/material/styles with the injectFirst option, in order for the CSS injection order to be correct. It is explained here.
So something like this shoud work:
<StyledEngineProvider injectFirst>
<IconButton className="my-class">
<CloseIcon></CloseIcon>
</IconButton>
</StyledEngineProvider>
You can style MUI components using several ways like GlobalStyles API, sx, styled or even normal way.
If you are going to style the particular component like IconButton, and if you have a look at the document for the API, you can find the class names for the component.
Here's couple of references.
https://mui.com/customization/how-to-customize/#main-content
How to give conditional style to MUI TextField?
Related
I have a problem in displaying the values from the TextField in my React app.
I'm using material UI and material-ui-phone-number as its packages. As you can see, the values after i click the flag, it is displaying on the back. I believe this is on the zIndex. Pls modify only the dialog2.js
Pls check my codesandbox here
CLICK HERE
Your MuiPhoneNumber utilizes a MUI modal for the country selection & its default z-index is 1300. It does not look like they expose a prop to alter its css properties so you can just target #country-menu (the id of the modal) using any preferred styling solutions
<div>
<style type="text/css">
{`
#country-menu {
z-index: 1801;
}
`}
</style>
<DialogContent style={{ width: 300, height: 500 }}>
<MuiPhoneNumber
name="MobileNo"
label="Mobile No."
variant="outlined"
fullWidth
defaultCountry={"vn"}
value={selectedValue}
onChange={(e) => setSelectedValue(e)}
/>
</DialogContent>
</div>
This can be achieved by doing the following changes:
Remove all CSS z-index defined
Put the Dialog 2 in Dialog 1 content
Here is the working CSB Link: https://codesandbox.io/s/nested-dialog-menuitem-dropdown-forked-wymm0?file=/dialog1.js
According to my research I can change the style of ANT components using the "style" prop (Even though that's not exactly in the docs of the Spin component)
Here's my attempt:
<Col>
{userCompaniesLoading ? (
<Spin style={{ color: 'white' }} />
) : (
<UserOutlined
onClick={() => {
setDrawerVisibility(!isDrawerVisible);
}}
/>
)}
</Col>
On inspect, each dot of the Spin is a "<i class="ant-spin-dot-item"></i>", and the color property does not work. So, how can I change the color of the Spin component?
You can set the Spin Component Color by adapting the background-color of the ant-spin-dot-item in your component css file.
.ant-spin-dot-item {
background-color: red;
}
Here is a CodeSandBox demo with a changed index.css.
Btw. a more robust and production ready way to adapt antd style is to create a custom theme.
Using a customized Webpack config works good in my project.
Also if you want to change the color of the tip you need to change this class:
.ant-spin-text {
color: #999; }
Looks like before tip class was .ant-spin-tip, but that didn't work for me.
Just sharing this in case it helps someone :D
Is there any way to override a Material UI components styling without having to create a whole new component using withStyles()?
For instance, say I am rendering the following and I just want to change the color of the "Delete" label:
<div style={styles.rowFooter}>
<FormControlLabel
control={<ClearIcon />}
label="Clear"
title="Clear all fields."
onClick={clearFields}
/>
<FormControlLabel
control={<DeleteIcon />}
label="Delete"
title="Delete this row."
onClick={deleteRow}
/>
</div>
To do this, I'd usually have to:
Create a new styles function that returns { color: "maroon" }.
Create a new component to render the "Delete" button.
Wrap my new component withStyles(newStylesFn)(MyComponent).
But I don't want to do all of that. Is there any way to avoid it?
Update:
One way that I know of is to just pass a CSS className. I was looking for something besides that because it doesn't even work in this situation to override the nested element.
What I'd really like to be able to do is just pass style={{ color: "maroon" }}, but that only changes the color of the icon, not the actual label text...
You could use the classes prop to override styles provided by Material UI instead of className.
<FormControlLabel
control={<DeleteIcon />}
label="Delete"
title="Delete this row."
classes={{
label: 'labelStyle'
}}
/>
styles.css
.labelStyle {
color: maroon !important;
}
Although it's Not the perfect solution, it still does the job without using withStyles().
In my reactJS applickation I use Material UI and react-bootstrap-table.
In a cell I use the Material UI IconButton like this:
<IconButton tooltip={t('tooltips:editRegulation')} tooltipPosition={'left'}
onClick={() => this.props.history.push("/pms-records/edit/" + row.pmsFindingId)}>{cell}}>
<FontIcon className="fa fa-pencil" aria-hidden="true"/>
</IconButton>
Result is this:
The tooltip is cut by the table cell borders. I tried to change the z-index and read this: https://github.com/mui-org/material-ui/issues/5912
But no solution.
Any hints for me?
Thanks in advance
Your cell has for sure a css that states overflow: hidden.
You can render the tooltip in a portal but you'll eventually lose the position of your element. Better to override the table-cell CSS
In GitHub linked issue:
I got it fixed by adding style={ { overflow: 'visible' } } to the
TableRowColumn that IconButton resides in.
In Material-UI's components you can give a style object for the component itself as an attribute on the JSX tag, but you have to give a separate style object for the underlineFocusStyle for example.
I mean for example TextField component's underlineFocusStyle.
You would style it like:
<TextField hintText="Hint Text" style={{width: '80%'}}
underlineFocusStyle={{backgroundColor: '#0000FF', height: '2px'}}
/>
Now, how to write that in normal css. The styling of that underlineFocusStyle of the component on top of styling the TextField component's style itself?
like, the style for the TextField's width would be of course:
width: 100%
but how the underlineFocusStyle would be styled?
Something like:
width: 100&
.underline-focus-style: background-color: #000FF
Because I'd like to give a style for the component, which has to be written in css. Thank you.
You can apply css styles to underlineFocusStyle and also to any material-ui component. Declare a const style object and add your css like below
const style = {
"background-color": "#fff", color:"#333"
}
and then pass this style object to underlineFocusStyle props like below
<TextField underlineFocusStyle={style} />
Hope this answers your question.