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.
Related
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?
I have given className as react-select-container and classNamePrefix as react-select. The styles described in the CSS is getting overwritten by the inbuilt style of the react-select. Image shows react-select__control styles is getting overwritten by the styles of some default class css-yk16xz-control of the react select. i want it to work the other way around and react-select__control styles stay on top and its styles get applied. any suggestions.
render() {
const titleOptions = [{value: 'Dr.', label: 'Dr.'}, {value:'Eng.', label:'Eng.'}, {value:'Officer', label:'Officer'}];
return (
<Select options={titleOptions} autoFocus className="react-select-container" classNamePrefix="react-select" />
)
}
Check Dom structure here
.react-select__control {
border: none;
border-radius: 3px;
}
I'm using material-ui version 3.9.3 in my React application. I want to add a background image on a dialog. I'm using the Dialog component for it but I'm unable to add a background image on the whole dialog.
For example:
<Dialog
fullScreen={fullScreen}
open={this.props.open}
onClose={this.handleClose}
aria-labelledby='responsive-dialog-title'
>
<DialogTitle
id='customized-dialog-title'
onClose={this.handleClose}
noCloseButtonNeeded={noCloseButtonNeeded}
>
{/* some jsx */}
</DialogTitle>
<DialogContent>
{children}
</DialogContent>
</Dialog>
I have tried to add an image using classes and custom CSS but I'm unable to do it.
Can anyone help me out to add it? Thanks in advance :)
First, you can define the background image in a styles object that can be used with the withStyles higher-order component to apply it to the dialog:
const styles = {
dialog: {
backgroundImage: "url(https://i.imgur.com/HeGEEbu.jpg)"
}
};
When you pass this object to the withStyles HOC, it will supply your component with a classes prop containing properties with the same names as the properties on styles that you've defined.
Next, you can apply this class to the Dialog by taking advantage of the classes prop (the specific overrides made available for the Dialog component are detailed here):
<Dialog ... classes={{paper: classes.dialog}}>
{/* ... */}
</Dialog>
This is telling material-ui to merge the styles you have defined in styles.dialog with the default styles on the Paper element that is used with the Dialog.
You'll need to make sure that you're wrapping your component in the withStyles HoC. If you have a class component, it will look something like this:
export default withStyles(styles)(DialogWithBackgroundImage);
For functional components, it would look something like:
export default withStyles(styles)(({open, children, classes}) => (<Dialog ...></Dialog>))
Here's a working example that ties everything together: https://codesandbox.io/embed/q3zy4r2np4
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().
I need to dynamically change the color in the react component for specific selector.
In scss (use sass) i have the following rule:
foo.bar.var * {
color: blue;
}
I want to change it in react code, to be yellow, red or something else.
I cant use style property for element, cause i need the selector to
apply for all subchilds !=)
Is there any native ways? Or should i use Radium? Or is there any similar libs for this? Maybe css-next some hove can help with this?
I have color picker, i cant write class styles for every color =(
For some answerers NOTE:
So i have selector in some scss file, that imported in some root js file with .class * {color: $somecolor} and i need change the $somecolor in that selector, during picking colors in color picker
Maybe i can somehow set selector for all nested inside style property? or there is the way how to recursively apply css style for every nested items from the style prop?
What about
class MyComponent extends React.Component {
render() {
const yellow = true // Your condition
return(
<div className={`foo bar var ${yellow && 'yellow'}`}
My item
</div>
)
}
}
.foo.bar.var {
& * {
color: blue;
}
&.yellow * {
color: yellow;
}
}
You could define a custom CSS property (CSS variables) using the style attribute of the element and assign the value to a prop, state etc.
<div className='foo bar var' style={{ "--my-color": props.color }}></div>
The custom property would work for any selector that apply to that component or children. So you could use it like that:
foo.bar.var * {
color: var(--my-color);
}
See a snippet with similar code here
this may sound stupid . but does this work ?
import myCss from './mydesign.css';
myCss.foo.bar.var = "your color"