动态设置样式值 - 反应

Posted

技术标签:

【中文标题】动态设置样式值 - 反应【英文标题】: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

【讨论】:

以上是关于动态设置样式值 - 反应的主要内容,如果未能解决你的问题,请参考以下文章

在反应组件中将样式作为道具传递

如何动态设置 QProgressBar 样式表?

动态键/值形式反应角度 5

如何设置反应选择选项的样式

通过 WPF 中的绑定动态设置资源样式

设置复杂的反应内联样式,例如悬停,在反应组件(例如按钮)上处于活动状态