动态设置样式值 - 反应

Question

我需要一种将“flex”切换为“none”的方法，反之亦然：

const UpdateSampleStyle = makeStyles((theme) => ({
    gridcontainer: {
    display: 'none', //props => props.show,
    justifyContent:'center', 
    marginTop:'5px'
  },
}));


 function UpdateFieldObservations({formdata, handleChangeParent}){
 const show = 'flex';
 const classes = UpdateSampleStyle(show);
const [displaySettings, setDisplaySettings] = useState({
  tradeWaterGrabSample: {display:'flex', justifyContent:'center', marginTop:'5px'},
  tradeWaterCompositeProgram: {display:'flex', justifyContent:'center', marginTop:'5px'},
  soilVapourGrabSample: {display:'flex', justifyContent:'center', marginTop:'5px'},
  soilVapourInsituMeter: {display:'flex', justifyContent:'center', marginTop:'5px'},
  stackEmissionGrabSample: {display:'flex', justifyContent:'center', marginTop:'5px'},
  stackEmissionInsituMeter: {display:'flex', justifyContent:'center', marginTop:'5px'},
  dustDeposition: {display:'none', justifyContent:'center', marginTop:'5px'}
});

}

用法如下：

<Grid container spacing={3} style={displaySettings.tradeWaterGrabSample}>
</Grid>
<Grid container spacing={3} style={displaySettings.tradeWaterCompositeProgram}>
</Grid>
<Grid container spacing={3} style={displaySettings.soilVapourGrabSample}>
</Grid>

等等..

更新：因此，在我在这里实施解决方案后，我的代码中出现了一些小错误......这可能会被忽视，在这里为面临相同问题的任何人添加：

 const classes = UpdateSampleStyle(show);

改为

 const classes = UpdateSampleStyle({show});

类名改为类名

Answer 1

首先，这不是应用样式时的正确方法。

解决方案 1：

如果您使用的是纯 css，则可以将样式保存在单独的 css 文件中。

例如，

.tradeWaterGrabSample {
 // your styles
}
.hidden {
  display: none;
}

稍后，在 JSX 中你可以放置 css 类： 例如

<Grid container spacing={3} className=`tradeWaterGrabSample ${yourCondition ? 'hidden' : ''}`>
</Grid>

解决方案 2：

您可以使用类名/clsx npm 库来应用多种样式： https://www.npmjs.com/package/clsx

https://www.npmjs.com/package/classnames

在这种情况下，您可以轻松地根据条件应用多个类： 例如：

import classNames from 'classnames';
...
<Grid container spacing={3} className={classNames('tradeWaterGrabSample' , {'hidden': true}> // replace true by your condition
</Grid>

解决方案 3：

看到Grid container，我假设您正在使用ma​​terial-ui / MUI。

如果你使用 MUI (Aka v5)，那么你可以使用 sx prop 例如，

<Grid container spacing={3} sx={{
 display: condition ? 'none' : 'flex'
}}
justifyContent="center"
mt="5px"
>
</Grid>

供参考：

https://mui.com/system/the-sx-prop

https://mui.com/guides/interoperability/

如果您使用 Material ui (Aka v4)，那么“sx”属性不起作用。你可以改用makeStyles / withStyles。

参考资料：

https://v4.mui.com/styles/api/

https://v4.mui.com/guides/interoperability/

正如您对 material-ui v4 的确认

您可以使用以下内容：

const useStyles = makeStyles({
  gridContainer: {
   marginTop: "5px"
  },
  hidden: {
    display: "none"
  },
});

在组件内部使用以下内容：

const classes = useStyles(props);

<Grid 
  container 
  spacing={3} 
  justifyContent="center"
  className={classNames(classes.gridContainer, { [classes.hidden]: true } )} // replace true by your condition
>
</Grid>

https://v4.mui.com/styles/api/#makestyles-styles-options-hook

根据您的评论，要使用组件的 props，您可以按照以下示例进行操作： https://v4.mui.com/styles/basics/#adapting-based-on-props

Answer 2

我认为有多种方法可以做到这一点，尽管我会这样做是添加对样式化组件的引用。

import { useRef } from "react";

//declare component
const ref1 = useRef(null);

return(
<Grid container spacing={3} style={displaySettings.tradeWaterGrabSample} ref={ref1}>
</Grid>
);

要将显示从 flex 更改为 none，您只需要做：

ref1.current.style.display = none OR ref1.current.style.display = flex