Material-UI устанавливает свойство класса из состояния - PullRequest
Новая
       17

Material-UI устанавливает свойство класса из состояния

0 голосов
/ 13 февраля 2020

У меня есть компонент, как показано ниже. Я хочу иметь возможность использовать значение из состояния, например [opacity, setOpacity] = useGlobal('opacity'), и иметь непрозрачность, равную значению tileBody background. Что было бы лучшим способом go об этом? 

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>
    );
}

1 Ответ

0 голосов
/ 13 февраля 2020

Вы можете передавать реквизиты своим стилям следующим образом: 

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)
    },
}));

Ссылка: makeStyles

...