css - react css 样式语法 - 在一行中使用变量和文本设置 css prop 的值

Question

我有这个代码:

const styles = theme => ({
  root: {
    paddingTop: theme.spacing.unit * 3,
    paddingBottom: theme.spacing.unit * 3,
    paddingLeft: 0,
    paddingRight: 0,
  }
});

是否可以只用一行设置填充？ (我想做这样的事情:)

const styles = theme => ({
  root: {
    padding: 0 theme.spacing.unit * 3',
  }
});

Answer 1

是的，您可以像这样创建字符串(使用 template literals ):

const styles = theme => ({
  root: {
    padding: `${theme.spacing.unit * 3} 0`,
  }
});

如果主题间距单位是 10px 将导致 padding: 10px 0，它是 padding: 10px 0 10px 0;

重要的是使用反引号 (`) 而不是引号。

需要注意的一点是，如果您的 theme.spacing.unit 不包含度量单位，请将其添加到大括号之后，如下所示:

padding: `${theme.spacing.unit * 3}px 0`,