样式材料 ui React 组件

Question

I am currently working on these material ui react components and need to customize these components, so I choose this way of styling the component as you can see below

.MuiStepIcon-root.MuiStepIcon-completed {
  color: "green"
}

In my app.scss file.

I know that there is withStyles using which I have to style my components, as the Ux is complex I find couldn't customize my component using withStyles and I found it difficult to do I that way.

So, Is it ok to customize the component directly using the class names, if no, why? Please provide me with some help.

Answer 1

It's fine to costumize the components from material-ui using className. Something that you should keep in mind is that changing a component style with their className(className that material-ui puts in the component) will change all others component's that have the same className. With that in mind you should try use something to prevent that from happen.

You could pass your className to the component and then use it as the target on css or you can use some css rules that prevent those things, one good example is https://rscss.io/