在React + material-ui

时间:2019-05-28 06:33:40

标签: reactjs material-ui

我正在使用React + material-ui。我想将每个组件中定义的样式提取到一个公共文件中。

如果将以下文件放在一个文件中,则每个文件都可以正常工作:-

import { withStyles } from '@material-ui/core/styles';
...

const styles = theme => ({
    createButton: {
        [theme.breakpoints.up('md')]: {
            borderRadius: '10px',
            display: 'block',
            margin: '0 auto',
            marginTop: '10px',
            marginBottom: '10px',
            width: '360px',
        },
        [theme.breakpoints.down('sm')]: {
            borderRadius: '0px',
            bottom: '0px',
            position: 'relative',
            width: '100%',
            height: '60px',
            fontSize: '20px',
        },
        backgroundColor: theme.palette.secondary.main,
        color: 'white',
        '&:hover': {
            backgroundColor: theme.palette.secondary.main,
        },
    }
});
...

class Home extends Component {
...
<Button className={this.props.classes.createButton}>Hello</Button>
...
}

export default (withStyles(styles)(Home));

现在,我希望将以下内容提取到另一个文件中,例如common.js,那么以后,我可以将其导入其他组件中,以便重新使用样式:-

const styles = theme => ({
    createButton: {
        [theme.breakpoints.up('md')]: {
            borderRadius: '10px',
            display: 'block',
            margin: '0 auto',
            marginTop: '10px',
            marginBottom: '10px',
            width: '360px',
        },
        [theme.breakpoints.down('sm')]: {
            borderRadius: '0px',
            bottom: '0px',
            position: 'relative',
            width: '100%',
            height: '60px',
            fontSize: '20px',
        },
        backgroundColor: theme.palette.secondary.main,
        color: 'white',
        '&:hover': {
            backgroundColor: theme.palette.secondary.main,
        },
    }
});

然后,当我

import { styles } from './somewhere/common';

createButton样式不再起作用。

提到

Attempted import error: 'styles' is not exported from './somewhere/common'.

1 个答案:

答案 0 :(得分:1)

您需要从styles导出'./somewhere/common',并将其添加到文件末尾:

export default styles;

并使用以下命令导入它:

import styles from './somewhere/common'