Переопределение стиля параметров выбора реакции

Question

 <select
    value={value}
    onChange={this.onChange.bind(this)}
  >
    {options.map(o => (
      <option value={o.value} key={o.value}>
        {o.text}
      </option>
    ))}
  </select>

select,
option{
box-sizing: border-box;
 width: 100%;
  height: 32px;
  line-height: 32px;
  padding: 5px 10px;
  outline: 0;
  border-width: 1px;
  border-style: solid;
  border-radius: 0;
  background: #fff;
  color: #008466;
  appearance: normal;
border-color: #008466;

}

Здесь у меня есть один элемент выбора и стиль для этого элемента. Стиль css select, опция является общим для нашего приложения. Но здесь, в элементе select, я не хочу применять общий стиль. Поэтому мое требование: 1 - Как дать выбор по умолчанию без какого-либо стиля 2 - Как я могу переопределить стиль элемента выбора.

Спасибо

Answer 1

Вы можете создать объект стиля, чтобы отменить все установленные правила:

const unsetStyle = {
  all: "unset";
}

// ...

<select
  style={unsetStyle}
  value={value}
  onChange={this.onChange.bind(this)}
>
  {options.map(o => (
    <option style={unsetStyle} value={o.value} key={o.value}>
      {o.text}
    </option>
  ))}
</select>

Но, как я уже упоминал, вы действительно не должны напрямую нацеливать HTML элементы в ваших таблицах стилей, как они есть в вашем примере.

Answer 2

Вы можете поместить Select в shadow dom , чтобы избежать наследования стилей.
В любом случае, стилизация select и option глобально с помощью тега, подобного этому, является плохой практикой, и теперь вы понимаете, почему . Вы должны использовать собственный класс и применять его там, где это необходимо.

---

https://www.npmjs.com/package/react-shadow-root

import React form 'react';
import ReactShadowRoot from 'react-shadow-root';

const Shadow = () => (
  <div> {/* The shadow root will be attached to this DIV */}
    <ReactShadowRoot>
       <select
         value={value}
         onChange={this.onChange.bind(this)}
       >
         {options.map(o => (
           <option value={o.value} key={o.value}>
             {o.text}
           </option>
         ))}
       </select>
    </ReactShadowRoot>
  </div>
);