将 jss 类名添加到 jsx 元素数组答案

【问题标题】：Add jss classname to array of jsx elements将 jss 类名添加到 jsx 元素数组
【发布时间】：2019-09-11 00:51:33
【问题描述】：

import withStyles from "@material-ui/core/styles"

function styles() {
  return {
    item: {
      color: "red"
    }
  }
}

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

我希望能够做到<li className={classes.item}>。我希望每个列表项从样式对象中的项键中获取颜色属性。通常，样式对象由withStyles(styles) 访问，但在这种情况下我该怎么做呢？

【问题讨论】：

标签： material-ui jsx jss css-in-js

【解决方案1】：

您可以通过多种不同的方式实现这一目标。我能想到的最简单的方法是使用这样的内联样式标签：

class YourClass extends Component {
  render() {
    const numbers = [1, 2, 3, 4, 5]
    return (
      {numbers.map(number =>
        <li style={{ color: "red" }}>{number}</li>
      )}
    );
  }
}

或者您可以创建一个 API 推荐的主题 here 并像这样使用它：

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import red from '@material-ui/core/colors/red';

const theme = createMuiTheme({
  palette: {
    customColor: { main: red },
  },
});

class YourClass extends Component {
  render() {
    const numbers = [1, 2, 3, 4, 5]
    return (
      <MuiThemeProvider theme={theme}>
        {numbers.map(number =>
          <li style={{ color: theme.palette.customColor.main }}>{number}</li>
        )}
      </MuiThemeProvider>
    );
  }
}

【讨论】：