React组件Material UI withStyles：样式中的变量？

Question

是否可以使用Material UI和withStyles在React组件中使用变量？如何用变量替换下面样式const中重复的“ 20px”？这可能吗？

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;

Answer 1

这只是JavaScript，因此您可以执行以下操作：

<CefSharpAnyCpuSupport>true</CefSharpAnyCpuSupport>

此外，通过使用样式功能，您可以轻松利用主题。 const myMargin = '20px'; const styles = { root: { flexGrow: 1, }, grow: { flexGrow: 1, }, margin: { marginLeft: myMargin, marginRight: myMargin, marginTop: myMargin, } }; 将主题作为参数传递：

withStyles

这是一个显示两个示例的工作示例：