1

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

样式看起来像这样：

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

问题是 MuiInputLabel-shrink 也是由 jss 生成的，并且具有 xxx 数字后缀。是否有任何适用于生成的类的选择器？

4

1 回答 1

0

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

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

<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 文档

于 2018-08-17T11:24:27.390 回答