Question

我正在尝试为材质textField创建自定义样式，并且需要一个到达非确定性类名的JSS选择器。

样式看起来像这样：

const styles = {
  '@media (min-width: 768px)': {
     borderLabel: {
     top: 2,
     '&.MuiInputLabel-shrink':{
        top: -2,
      }
    }
}

问题是MuiInputLabel-shrink也是由jss生成的，后缀为xxx。是否有任何选择器可以处理生成的类？

Answer 1

Material-ui有一个内置的API，您可以在其中重写大部分样式。

假设您在react中使用material-ui，则可以在InputLabel组件的classes属性中覆盖收缩。

<InputLabel 
    classes={{ 
        shrink: classes.shrinkStyle 
    }} 
/>

阅读文档以找到要覆盖的正确组件。随附的代码也可以帮助您。 https://codesandbox.io/embed/l32qn5p18q

链接到GitHub中的类似问题：https://github.com/mui-org/material-ui/issues/10468

现在，然后通过JSS返回样式

通过嵌套，可以使用JSS进行样式设置。我尚未对此进行大量研究，但是我知道您可以使用嵌套的JSS。示例：

const styles = {
  '@media (min-width: 768px)': {
     borderLabel: {
       //styling
       '&>div':{
         //styling
       }
       '&>div>div>td':{
         '& svg':{
           //styling
         }
       }
     }
   }
}

您还应该阅读JSS documentation

jss覆盖材料-ui非确定性类

1 个答案: