Необходимо добавить другой стиль на основе пропущенных реквизита

Question

У меня есть компонент select, и мне нужно добавить дополнительные опции к опциям, основываясь на пропущенной пропе.Это связано с тем, что в некоторых ситуациях у меня есть значок, абсолютно расположенный внутри компонента select, и поэтому в таких сценариях требуется интервал слева

render()
const { classes, icon, selectWithIcon } = this.props;

return(
<Select
          value={this.state.value}
          onChange={this.handleChange}
          input={<FilledInput 
          name={this.props.label} 
          id={this.props.id} />}
        >
        {this.props.options && this.props.options.map(option => ( 
          <MenuItem value={option.value} >
            {<ListItemText className={classes.listItemText} primary={<Typography style={{ color: option.color, {selectWithIcon? marginLeft: '10px' : ''}}}>{option.text}</Typography>}/>}
          </MenuItem>
        ))}
        </Select>
)

Как добавить условие для стилизации основного объекта в MenuItem?Приведенный выше код дает мне ошибку

Answer 1

Вот правильный синтаксис (вам нужно поместить условие в значение для marginLeft, а не вокруг ключа в вашем объекте стиля):

                <Typography
                  style={{
                    color: option.color,
                    marginLeft: selectWithIcon ? "10px" : ""
                  }}
                >
                  {option.text}
                </Typography>

Вот полный рабочий пример:

import React from "react";
import ReactDOM from "react-dom";

import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import ListItemText from "@material-ui/core/ListItemText";
import Typography from "@material-ui/core/Typography";

const MySelect = ({ selectWithIcon, options }) => {
  return (
    <Select value="1">
      {options.map(option => (
        <MenuItem value={option.value}>
          {
            <ListItemText
              primary={
                <Typography
                  style={{
                    color: option.color,
                    marginLeft: selectWithIcon ? "10px" : ""
                  }}
                >
                  {option.text}
                </Typography>
              }
            />
          }
        </MenuItem>
      ))}
    </Select>
  );
};
function App() {
  const options = [
    { text: "Item 1", value: 1, color: "blue" },
    { text: "Item 2", value: 2, color: "purple" }
  ];
  return (
    <div className="App">
      <MySelect options={options} selectWithIcon={true} />
      <br />
      <MySelect options={options} selectWithIcon={false} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);