Блог

Мне нужно изменить пользовательский интерфейс select компонента пользовательского интерфейса react material на такой.

Это CSS, который я ввел до сих пор

  const styles = {
    width:'250px',
    border:'1px solid gray',
    borderBottom:'none',
    padding:'1rem'
  }
  

Это код react.

  <FormControl styles={styles}>
          {/* <InputLabel id='demo-simple-select-label'>Categories</InputLabel> */}
          <Select
            labelId='demo-simple-select-label'
            id='demo-simple-select'
            value={age}
            onChange={handleChange}
            style={styles}
          >
            <MenuItem value={'All'}>All</MenuItem>
            {categories.map((category) => (
              <MenuItem value={category} key={category}>
                {category}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
  

Здесь я комментирую вводимый компонент. Итак, теперь, если ничего не выбрано, панель пуста. Я хочу отобразить текст «Категории», когда ничего не выбрано с помощью CSS. также настройте этот код, чтобы он на 100% соответствовал заданному дизайну.

Как мне добиться этого с помощью CSS?

Это мой полный код https://codesandbox.io/s/material-demo-forked-wcmx1?file=/demo.js:1028-1606

Любая помощь!

Заранее спасибо.

из документов : (https://material-ui.com/api/select /)

1. displayEmpty

Если значение true, отображается значение, даже если элементы не выбраны. Чтобы отобразить значимое значение, в renderValue prop должна быть передана функция, которая возвращает значение, которое будет отображаться, если элементы не выбраны. Вы можете использовать его только тогда, когда собственный prop имеет значение false (по умолчанию).

2. renderValue

Визуализируйте выбранное значение. Вы можете использовать его только тогда, когда собственный prop имеет значение false (по умолчанию).

Подпись: функция (значение: любое) => Значение ReactNode: значение, предоставляемое компоненту.

песочница