Реагировать компонент материала UI withStyles: переменные в стилях? - PullRequest
Новая
       11

Реагировать компонент материала UI withStyles: переменные в стилях?

0 голосов
/ 20 января 2019

Есть ли способ использовать переменные в моих компонентах React с использованием Material UI и withStyles? Как можно заменить повторяющиеся 20px в стилях const ниже на переменную? Возможно ли это? 

import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import Topnav from '../component/Topnav';
import Footer from '../component/Footer';

const styles = {
    root: {
        flexGrow: 1,
    },
    grow: {
        flexGrow: 1,
    },
    margin: {
        marginLeft: '20px',
        marginRight: '20px',
        marginTop: '20px',
    }
};

class MainLayoutComp extends Component {
    render = props => {
        const { children, classes } = this.props;

        return (
            <>
                <Topnav />
                <div className={classes.margin}>
                    {children}
                    <Footer />
                </div>
            </>
        );
    }
}

const MainLayout = withStyles(styles)(MainLayoutComp);
export default MainLayout;

1 Ответ

0 голосов
/ 20 января 2019

Это просто JavaScript, поэтому вы можете сделать следующее: 

const myMargin = '20px';
const styles = {
    root: {
        flexGrow: 1,
    },
    grow: {
        flexGrow: 1,
    },
    margin: {
        marginLeft: myMargin,
        marginRight: myMargin,
        marginTop: myMargin,
    }
};

Кроме того, вы можете легко использовать свою тему, используя функцию для стилей. withStyles передаст тему в качестве аргумента: 

const styles = (theme) => ({
    root: {
        flexGrow: 1,
    },
    grow: {
        flexGrow: 1,
    },
    margin: {
        marginLeft: theme.spacing.unit * 3,
        marginRight: theme.spacing.unit * 3,
        marginTop: theme.spacing.unit * 3,
    }
});

Вот рабочий пример, показывающий оба:

Edit 6llmy585yz

...