css - 在 Material ui 样式中编写 JS

Question

我想在 mui 样式中加入一些条件逻辑

当前使用内联样式，该样式有效

<div className={classes.form} style={{alignItems: ((Code.length>10 || Description.length>100) ? 'start' : 'center')}}> 
... 
</div>

但是想在 mui 样式中做同样的事情，这会出错

// Code and Description state
...

const useStyles = makeStyles(theme => ({
form: {
    alignItems: {(Code.length>10 || Description.length>100) ? 'start' : 'center'}, //Code not defined
  }

标签： cssreactjsmaterial-ui

Answer 1

您可以将道具传递给useStyles钩子并像这样使用它：

const classes = useStyles(props);

const useStyles = makeStyles(theme => ({
form: {
    alignItems: props => props.Code.length>10 || props.Description.length>100 ? 'start' : 'center',
  }