使用 material-ui 为 jss 样式使用主题对象编写 shorthand 符号

Question

我可以通过以下方式应用边距来设置组件的样式。

style.js

const styles = theme => ({
    button: {
    margin: '12px 18px',
    }
})

但我想使用 material-ui 的 theme.spacing.unit 将边距应用于组件。我是这样做的：

style.js

const styles = theme => ({
    button: {
    margin: '`${theme.spacing.unit * 3}` `${theme.spacing.unit * 4}`',
    }
})

但我在这方面运气不佳。有人可以指出我的错误吗？

Answer 1

您需要指定单位：

const styles = theme => ({
    button: {
        margin: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 4}px`,
    }
})

Write shorthand notation for margin using theme object for styling with jss using material-ui