Add jss classname to array of jsx elements - material-ui

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>
);
I want to be able to do <li className={classes.item}>. I want the each list item to get the color property from the item key in the styles object. Usually, the styles object is accessed by withStyles(styles) but how can I do this in this situation?

Answer 1

You could achieve this in a lot of different ways. The simplest one I can think of is using a inline style tag like this:
class YourClass extends Component {
render() {
const numbers = [1, 2, 3, 4, 5]
return (
{numbers.map(number =>
<li style={{ color: "red" }}>{number}</li>
)}
);
}
}
Or you could create a Theme like the API recommends here and use it like this:
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>
);
}
}