act-select: условное оформление выбранных объектов - PullRequest
Новая
       7

act-select: условное оформление выбранных объектов

0 голосов
/ 19 марта 2020

Я ищу очень специфичное c поведение в ответной реакции. Я хочу иметь возможность применять собственный стиль (backgroundColor: "blue") к определенному подмножеству c раскрывающихся опций компонента. Тем не менее, похоже, что сделать это нелегко, потому что я не могу получить доступ к условному запросу, который мне нужен в подпрограмме стилей.

Пример. Итак, предположим, что есть 6 вариантов. Я хочу, чтобы три из этих опций имели определенный стиль c (другой цвет), основанный на истинном условии, а остальные имеют нормальный стиль.

Вот изображение, показывающее, чего я хотел бы достичь :

Dropdown, 3 blue 3 normal

Спасибо за всю вашу помощь. 

let optionsIn = [{ value:0, label:"Label1", shouldBeBlue:true },
           { value:1, label:"Label2", shouldBeBlue:true },
           { value:2, label:"Label3", shouldBeBlue:true }, 
           { value:3, label:"Label4", shouldBeBlue:false },  
           { value:4, label:"Label5", shouldBeBlue:false },
           { value:5, label:"Label6", shouldBeBlue:false },
          ]

<Select
options={optionsIn}
/>

Так что в этом случае, Label1, Label2, и у Label3 все должно иметь синий цвет фона в реагирующем выборе, но Label4, Label5 и Label6 должны отображаться нормально.

1 Ответ

0 голосов
/ 20 марта 2020

Нашел ответ. Вы можете получить доступ к опциям опций с параметром {data}: 

      let optionsIn = [{ value:0, label:"Label1", shouldBeBlue:true },
       { value:1, label:"Label2", shouldBeBlue:true },
       { value:2, label:"Label3", shouldBeBlue:true }, 
       { value:3, label:"Label4", shouldBeBlue:false },  
       { value:4, label:"Label5", shouldBeBlue:false },
       { value:5, label:"Label6", shouldBeBlue:false },
      ]

                  <Select
                    options={optionsIn}
                    styles={{
                      option: (styles, { data }) => {
                        return {
                          ...styles,
                          backgroundColor: data.shouldBeBlue
                            ? "blue"
                            : undefined
                        };
                      }
                    }}
                  />
...