材料 UI 从状态设置类属性

Question

我有一个如下所示的组件。 我希望能够使用状态中的值，例如[opacity, setOpacity] = useGlobal('opacity')，并将不透明度作为tileBody背景的值。 最好的方法是什么？

import React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import {CardContent, fade, Hidden} from "@material-ui/core";
import Card from "@material-ui/core/Card";
import { useGlobal, setGlobal, useDispatch } from 'reactn';
/*
options = {
...other options,
tileTransparencyValue: 75,
*/

const useStyles = makeStyles(theme => ({
tile: {
backgroundColor: 'transparent',
},
tileHeader:  {
backgroundColor: fade(theme.palette.grey[800], 0.7),
},
tileBody: {
backgroundColor: fade(theme.palette.grey[800], tileTransparencyValue/100),
},
}));

export default function DashTile(props) {
const [options, setOptions] = useGlobal('options');
const {title, content} = props;
const classes = useStyles();
return (
<Grid item lg={4} xs={12}>
<Card className={classes.tile}>
<CardContent className={classes.tileHeader}>
<Typography variant="h5">{title}</Typography>
</CardContent>
<CardContent className={classes.tileBody}>
<Typography variant="content">{content}</Typography>
</CardContent>
</Card>
</Grid>
);
}

Answer 1

你可以像这样将道具传递给你的样式：

export default function DashTile(props) {
const [options, setOptions] = useGlobal('options');
const [opacity, setOpacity] = useGlobal('opacity')
const {title, content} = props;
const classes = useStyles({opacity})
return (
<Grid item lg={4} xs={12}>
<Card className={classes.tile}>
<CardContent className={classes.tileHeader}>
<Typography variant="h5">{title}</Typography>
</CardContent>
<CardContent className={classes.tileBody}>
<Typography variant="content">{content}</Typography>
</CardContent>
</Card>
</Grid>
);
}

然后你可以像这样检索样式中的道具：

const useStyles = makeStyles(theme => ({
tile: {
backgroundColor: 'transparent',
},
tileHeader:  {
backgroundColor: fade(theme.palette.grey[800], 0.7),
},
tileBody: {
backgroundColor: ({opacity}) => fade(theme.palette.grey[800], opacity)
},
}));

参考：制作样式