动态设置样式值 - 反应

Posted 2023-02-22

【中文标题】动态设置样式值 - 反应

【英文标题】：setting style values dynamically - react

【发布时间】：2022-01-18 07:04:59

【问题描述】：

我需要一种将“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);

类名改为类名

【参考方案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

【讨论】：

谢谢！是的，我正在使用 v4 material-ui

实际上我在这里添加了如何在我的代码中使用 makestyles...如何向它添加道具？

给你：v4.mui.com/styles/basics/#adapting-based-on-props

【参考方案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