使用材质 ui 中的 withStyle HOC 的 CSS 选择器答案

【问题标题】：CSS Selectors using withStyle HOC from material ui使用材质 ui 中的 withStyle HOC 的 CSS 选择器
【发布时间】：2020-01-19 13:42:20
【问题描述】：

我将 material-ui 与 Reactjs 一起使用，对于我选择使用 withStyles HOC 来设置组件样式的样式，问题是我不知道如何将复杂的选择器从 CSS 转换为 React Style，

const Styles ={
  label :{
      width:"100%"
  },

  cardInputRadio:{
      display:"none",
      '&:checked + .cardInput': {
        color: 'green',
        display:"block"
     }
  },

  cardInput:{
      margin:"10px",
    '&:hover': {
        cursor: 'pointer',

     },
    'cardInputRadio:checked+ &':{
        color:'red',
     }

  },
  container:{
      flexGrow:1,
  },
  card: {
    minWidth: 100,
    width:300,
    display:"inline-block"
  },

     title: {
      fontSize: 14,
     },

   } ;

这就是我现在正在做的，当然我正在使用

export default withStyles(Styles)(MyComponent);

如您所见，我正在尝试翻译此 css 以响应样式

.card-input-element:checked + .card-input {
     box-shadow: 0 0 1px 1px #2e0071;
 }

我想在选中单选按钮时更改卡片颜色，但我无法使用 Material UI 样式 HOC 谢谢你

【问题讨论】：

我看到的主要缺失是，当引用同一样式表中的另一个样式规则时（即使用相同的withStyles 调用创建），您需要使用$（例如@987654328 @)。请查看我的一些相关答案以及它们链接到的 JSS 文档以获得更多解释：stackoverflow.com/search?q=user%3A7495930+jss-plugin-nested
这里是 JSS 文档的直接链接：cssinjs.org/jss-plugin-nested/…

标签： css reactjs material-ui

【解决方案1】：

添加条件样式的一种方法是使用classnames 库。

假设你的组件有一个 'checked' 属性，你的样式将遵循

cardInputRadio:{
  display:"none"
},
cardInputRadioChecked: {
  color: 'green',
  display: 'block'
}

在你的组件中你定义你的类名是这样的

import classNames from 'classnames'

const MyInputRadioComponent ...
  const { checked } = props
  const classNames = classNames({
    [styles.cardInputRadio]: true,
    [styles.cardInputRadioChecked]: checked
  })

  return <YourRadioComponent classNames={classNames}/>

【讨论】：