在 Material ui 样式中编写 JS答案

【问题标题】：Write JS inside material ui styles在 Material ui 样式中编写 JS
【发布时间】：2021-05-17 08:34:16
【问题描述】：

我想在 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
  }

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

您可以通过 useStyles 钩子传递一个道具并像这样使用它：

const classes = useStyles(props);

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

【讨论】：

【解决方案2】：

您从未提及Code 和Description 是如何定义的，但您可以将props 传递给makeStyles。

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

// Usage
const classes = useStyles(props);

【讨论】：