material-ui - 将 jss 类名添加到 jsx 元素数组

Question

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)但在这种情况下我该怎么做呢？

Answer 1

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

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

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

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>
    );
  }
}