reactjs - 将类添加到选定的选项

问题描述

我需要在 React-Select 中使用所选选项的 after 以在该行中放置一个复选框（并在选择该选项时检查它。

我可以通过 SCSS 修改元素，但类中的选定选项和未选定选项之间没有区别。（它只是另一个看似随机名称的类。它的css-[random]-option）

那么有没有办法在选择选项时添加一个类？

这是我必须做的设计：

我已经完成了所有事情，但正在检查该框。

如果你想看代码：

const customStyles = {}
return(<div class="SelectContainer">
    <div class="opener" onClick={(e) => {setIsOpen(!isOpen);}}>
        {outputValue ? outputValue : placeholder}
        <Chevron />
    </div>
    {isOpen &&
        <Select 
            onChange={onChangeFunction}
            value={elementValue}
            autoFocus
            backspaceRemovesValue={false}
            controlShouldRenderValue={false}
            hideSelectedOptions={false}
            menuIsOpen
            tabSelectsValue={false}
            noOptionsMessage={()=>{return "Aucun résultat";}}
            placeholder="Rechercher"
            customStyles={customStyles}
            {...rest}
            //style={{width:"100%"}}
        >
            {choices && choices.map((choice) => { 
                return (<option key={choice.val} value={choice.val}>{choice.option}</option>)
            })}
        </Select>
    }
</div>)

.SelectContainer{
    .opener{
      display:flex;
      align-items: center;
      justify-content: space-between;
      padding:0 24px;
      height:72px;
      //border:1px solid #000;
      background:#fff;
    }
    input{
      height:24px;
    }
    [class$="container"]{
      background:#fff;
      //padding:0 24px;
      padding:0;
      [class$="ValueContainer"]{
        
      }
      [class$="control"]{
        border:0;
        position:relative;
        padding-left:30px;
        margin:0 24px;
        &:before{
          content:' ';
          display:block;
          position:absolute;
          top:50%;
          left:0;
          transform:translateX(-0) translateY(-50%);
          width:16px;
          height:16px;
          background:url(../../assets/image/search.svg) center center no-repeat;
          background-size:contain;
        }
        [class$="Input"]{
          width: calc(100% - 50px);
          z-index: 100;
          position: relative;
          
          input{width:100% !important;}
        }
      }
      [class$="IndicatorsContainer"] [class$="indicatorContainer"]:last-child,[class$="IndicatorsContainer"] [class$="indicatorSeparator"]{
        display:none !important;
      }
      [class$="indicatorContainer"]{
        padding:0;
      }
      [class$="menu"]{
        position:relative;
        box-shadow:none;
        [class$="option"]{
          background:none !important;
          color:#000 !important;
          position:relative;
          padding:8px 24px;
          cursor:pointer;
          &:hover{
            background:var(--light) !important;
          }
          &:after{
            width:16px;height:16px;
            display:block;position:absolute;
            content:' ';
            border:2px solid #000;
            position:absolute;
            right:24px;
            top:calc(50% - 8px);
          }
        }
      }
    }
  }

标签： reactjsreact-select

reactjs - 将类添加到选定的选项

问题描述

解决方案

推荐阅读