Раскрасьте каждый выбранный выпадающий элемент в соответствии с semanti c -ui - PullRequest
Новая
       10

Раскрасьте каждый выбранный выпадающий элемент в соответствии с semanti c -ui

0 голосов
/ 22 января 2020

У меня есть следующий jsx код (react-semantic-ui) в методе render: 

{!this.props.loading &&
      <ControlRow>
        <Grid.Column width={5}>
          <Dropdown
            multiple
            fluid
            selection
            options={myOptions}
            onChange={this.navigateToMyFunc}
          />
...
...

И я использую styled-components для оформления своих элементов:

https://github.com/styled-components/styled-components

К сожалению, единственный рабочий стиль для Dropdown из-за некоторых странных особенностей среды является косвенным от ControlRow: 

const ControlsRow = styled(Grid.Row)`
  .ui.multiple.dropdown > .label {
    color: white !important;
    background-color: #2185d0;
  }
`

См. Также следующий поток: Раскрывающийся список в semanti c Пользовательский интерфейс не может быть выполнен с множественным типом выбора, если он обернут стилевыми компонентами

Теперь Dropdown, как вы можете видеть, имеет тип multiple. Каждый выбранный элемент должен быть окрашен в соответствии с указанными в myOptions опциях. Я могу передать myOptions в ControlRow, что сделает массив доступным в нем, но я не уверен, как написать часть styled-components: 

.ui.multiple.dropdown > .label {
    color: white !important;
    background-color: ${props => props.myOptions..??};
  }

Мне нужно также знать, какой элемент выбрать правильный myOptions цвет. Вот как это выглядит:

enter image description here

Сейчас это просто всегда blue, но мне нужно, чтобы он был раскрашен в соответствии с каждым вариантом.

Обновление

Похоже, что это отсутствует в semantic-ui-react - раскраска с помощью hex - кодов (допускается только несколько регулярных названий цветов) - поэтому я отправил эта функция для их github:

https://github.com/Semantic-Org/Semantic-UI-React/issues/3889

1 Ответ

1 голос
/ 24 января 2020

Для этого вам не нужно использовать стиль CSS. И ничего, что связано со стилизованными компонентами, делать не нужно.

SemanticUI позволяет использовать пользовательскую функцию рендеринга для меток.

Вы могли бы использовать ее так: 

const renderLabel = (option) => ({
  color: option.color,
  content: option.text,
})

const myOptions = [
  { text: "option one", color: "blue" },
  { text: "option two", color: "red" },
  // more options...
]

// ...

<Dropdown
  multiple
  fluid
  selection
  options={myOptions}
  onChange={this.navigateToMyFunc}
  renderLabel={renderLabel} // here
/>

Предполагается, что ваши объекты опций имеют свойство color и свойство text. Вам необходимо настроить форму объектов параметров.

Кроме того, свойство color должно быть одним из доступных цветов меток в SemanticUI : 

const colors = [
  'red',
  'orange',
  'yellow',
  'olive',
  'green',
  'teal',
  'blue',
  'violet',
  'purple',
  'pink',
  'brown',
  'grey',
  'black',
]
...