question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Styling is not applied to the select list.

See original GitHub issue

After installing through npm when I add this snippet

<Select
     name="filter-category"
     value="one"
     options={options}
     onChange={logChange}
/>

I get a list but the styling is totally off. Can you help what’s going wrong here. screen shot 2015-11-23 at 6 40 43 pm

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:15 (1 by maintainers)

github_iconTop GitHub Comments

28reactions
bzumscommented, Nov 23, 2015

Are you importing the component like import Select from 'react-select'; and using a bundler like Webpack? Then you have to import the CSS explicitly: import 'react-select/dist/react-select.css';

3reactions
ciocancommented, Apr 7, 2016

in your js component fil just import the scss import ‘react-select/scss/default.scss’

then in the webpack.config module loaders make sure to remove exclude: /node_modules/ beacause you will load the scss from that folder

Read more comments on GitHub >

github_iconTop Results From Across the Web

HTML: Select Option styling not working - Stack Overflow
Save this question. Show activity on this post. I'm trying to style a select box, changing all of the color options to red....
Read more >
CSS Targeting On Select Options Not Working - SitePoint
Hi All We're attempting to edit the background colour and font on the select options on a form, you'll see the title useage...
Read more >
list-style-type - CSS: Cascading Style Sheets - MDN Web Docs
The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.
Read more >
Styling `select` elements for real - Microsoft Edge Blog
Several CSS properties can be used to change the appearance of an option, and some properties applied to the <select> element are inherited...
Read more >
Striking a Balance Between Native and Custom Select Elements
Custom selects (left) are often used in place of native selects (right) ... 2, The dropdown does not need an active option (e.g....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found