Question

如何访问组件子级的内部CSS类并为其添加样式或更改样式？就像我想更改和自定义材质ui步进器步圈字体大小和颜色等等。

我如何编写像下面这样的css类：

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

或

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

谢谢。

Answer 1

无需担心类的一种非常直接的方法是使用style <Stepper style={{ fontSize: '18px' }} />道具。像这样

div

这会将样式应用于根元素，我认为它是material-ui或各种容器，尽管它可能因组件而异。

更具体地说，您可能想使用classes <Stepper classes={{ text: { fontSize: '18px' }}} />道具。也就是说，由于您确切知道要覆盖的类，因此可以执行以下操作，

text

我在这里使用.text作为类名，因为在问题中，svg似乎是在引用并已经存在的类。由于您要尝试增加Stepper附带的svg中的字体大小。您需要将类名称应用于MuiSvgIcon-root-184并覆盖它。在这种情况下，其类名之一是<Stepper classes={{ MuiSvgIcon-root-184: { fontSize: '18px' }}} />，因此您希望能够做到这一点，

material-ui

该类名由className根据道具产生的布局动态生成，并且在所有渲染器中可能有所不同。

TLDR

因此，值得信赖的<Stepper className={'customStepper'} />组件并按如下所示编写一些CSS和组件JSX。

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

!important

您需要包含!important，以确保遵守此样式。默认情况下，Material UI将其样式放在文档的最后，因此它们通常会覆盖其他任何内容，但是else{ req.session.userId = user._id; return res.redirect('/myprofile ') // this line }规范应覆盖替代。

Answer 2

感谢@spakmad的回答，但这不完全是我的意思，也许我的问题还不够清楚。我的意思是如何用实质性的ui对象样式类格式（用withStyle HOC注入的类）编写上述CSS。

我找到了解决方案：

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

和

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

如何在React和Material UI中访问更改组件内部项目的样式？

2 个答案: