Добавить имя класса jss в массив элементов jsx - PullRequest
Новая
       31

Добавить имя класса jss в массив элементов jsx

0 голосов
/ 21 апреля 2019 

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), но как я могу это сделать в этой ситуации?

1 Ответ

0 голосов
/ 22 апреля 2019

Вы можете достичь этого разными способами.Самый простой из них, который я могу придумать, - это использовать встроенный тег стиля, подобный следующему: 

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