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}>。我希望每个列表项都从styles对象中的项键获取color属性。通常，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建议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>
    );
  }
}

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

1 个答案: