How can I change inline style to css using Material-ui in React?

Question

I am using inline styling to override the styling of material-UI components in React. Recently, I realized that using CSS is a more organized and better way to style components. I have referred all the documents on the material-ui user guides. But couldn't find the solution.

Working Code:

const useStyles = theme => ({
   input: {
     color: '#000',
     fontSize: "14px",
   },
});

Inside render method of Class.

const { classes } = this.props;

<TextField
    InputProps={{
      className: classes.input
    }}
    InputLabelProps={{
      className: classes.input
    }}

 />

export default withStyles(useStyles)(MyClass);

I want to override style using CSS like below:

CSS File:

     .input {
        color: #ffffff;
         font-size: 18px;
      }

InputProps={{
          className: "input"
        }}

How can I achieve that? Thanks.

jkrat · Accepted Answer · 2019-08-28 15:31:59Z

2

Using a CSS file and normal className can override the styling of material-UI component, but the CSS specificity is important. According to the Material-UI docs:

By default, the style tags are injected last in the <head> element of the page. They gain more specificity than any other style tags on your page e.g. CSS modules, styled components.

The StylesProvider component has an injectFirst prop to inject the style tags first in the head(less priority).

import { StylesProvider } from '@material-ui/styles';

<StylesProvider injectFirst>
  {/* Your component tree.
      Styled components can override Material-UI's styles. */}
</StylesProvider>

answered Aug 28, 2019 at 15:31

jkrat

1588 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Archie Butler Over a year ago

Could you please give an example of where you write the css/scss in this declaration?

Collectives™ on Stack Overflow

How can I change inline style to css using Material-ui in React?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related