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

时间:2020-01-19 13:42:20

标签: css reactjs material-ui

我将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进行更改 谢谢

0 个答案:

没有答案