How can I access to change styles of inner items of a component in react and material ui?

问题

How can I access to inner css classes of children of a component and add or change styles to/of them? like I want to change and customize material ui stepper steps circle font size and color and so on.

How can I write css classes like bellow:

.stepper circle { 
  font-size:18px;
}

.stepper .text {
  font-size:18px;
}

thanks.

回答1:

The very straightforward way to do it without having to worry about classes is by using the material-ui style prop. Like so,

<Stepper style={{ fontSize: '18px' }} />

This applies a style to the root element, which I assume to be a div or container of sorts, although it probably varies by the component.

More specifically, and what you probably want to do is use material-ui classes prop. That is, since you know exactly what classes you want to override, you can do so as follows,

<Stepper classes={{ text: { fontSize: '18px' }}} />

I use text here as a classname because in the question, .text appears to reference and already existing class. Since you're trying to increase the size of the font in this svg that comes with the Stepper. You'll need to get the class name applied to the svg and override it. In this case, one of its classnames is MuiSvgIcon-root-184 so you would expect to be able to do,

<Stepper classes={{ MuiSvgIcon-root-184: { fontSize: '18px' }}} />

This classname however is generated by material-ui dynamically based on the layout resulting from props and could be different across all renders.

TLDR

So, trusty className component and writing some css and component JSX as follows.

<Stepper className={'customStepper'} />

.customStepper svg: {
   font-size: '18px !important',
}

You need to include !important to make sure this style is respected. Material UI by default puts its styles last in the document so they're normally overwriting anything else, but the !important spec should override the override.

回答2:

Thanks to @spakmad's answer, but that's not exactly what I meant, maybe my question was not clear enough. I meant how to write above mentioned CSSs in material ui object style classes format(classes injected with withStyle HOC).

I found my solution:

stepper:{
  '& circle':{
      fontSize: '18px'
    }
}

and

stepper: {
  '& .text': {
    fontSize: '18px'
  }
}

来源：https://stackoverflow.com/questions/51727865/how-can-i-access-to-change-styles-of-inner-items-of-a-component-in-react-and-mat

标签

reactjs

material-ui