动态设置样式值 - 反应

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

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

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

Answer 2

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

方案一：

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

例如，

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

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

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

方案二：

您可以使用类名/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>

方案三：

看到 Grid container 我假设您正在使用 material-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

根据你的评论，要使用组件的道具，你可以按照这个例子： https://v4.mui.com/styles/basics/#adapting-based-on-props

动态设置样式值 - 反应

setting style values dynamically - react

css

reactjs

styled-components