Overriding the style of react select options

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;

}

Here I have one select element and style for that element. The style css select,option is common to our application.But here in select element I do not want to apply the common style.So my requirement is 1 - How to give default select without any style 2 - How can I override the style of select element.

Thanks

Does this answer your question? [Reset/remove CSS styles for element only](https://stackoverflow.com/questions/15901030/reset-remove-css-styles-for-element-only) — Evrim Persembe, May 27 '20 at 15:26
it doesn't matter that you are using React though. You can use the exact same methods explained there. You can either use the `style` property, or create a new CSS class and apply it using the `className` property. — Evrim Persembe, May 27 '20 at 15:37
yes you are right ,it does not matter , But in my application multiple select element is there ,Some may contains the style which is specified into the css and rest of contains the customized css for the select option and select ,so how can I write that customized css for select and select option and overriding the common one select css. — Amit P., May 27 '20 at 15:54
You can put the Select into shadow dom to avoid style inheritance. Anyway, styling `select` and `option` globally via tag like that is a bad practice. You should use custom class and apply that where needed. — Qwerty, May 27 '20 at 16:07
You should not `bind` methods in JSX attributes, this creates new references on each render, forcing your components to always re-render. You can specify the methods via [class fields](https://stackoverflow.com/a/50297786/985454) which lexicaly capture the class' `this`. — Qwerty, May 27 '20 at 16:18

score 0 · Answer 1 · answered May 27 '20 at 16:10

You can put the Select into shadow dom to avoid style inheritance.
Anyway, styling the select and option globally via tag like that is a bad practice and now you see why. You should use custom class and apply that where needed.

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>
);

score 0 · Accepted Answer · answered May 27 '20 at 16:21

You can create a style object to unset all the set rules:

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>

But as I have already mentioned, you really shouldn't directly target HTML elements in your stylesheets the way they are in your example.

Overriding the style of react select options

2 Answers2