动态设置样式值 - 反应
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
,我假设您正在使用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
根据您的评论,要使用组件的 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
【讨论】:
以上是关于动态设置样式值 - 反应的主要内容,如果未能解决你的问题,请参考以下文章