react-select: Styling is not applied to the select list.

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

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 17 (1 by maintainers)

Most upvoted comments

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

+29

bzums on Nov 23, 2015

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

ciocan on Apr 7, 2016

@JedWatson node_modules/react-select/dist/react-select.css this file does not exist in my node_modules directory. How to fix it? My react-select package version is 5.7.4

adrianomic on Jul 20, 2023

@bzums

I import the component like import Select from 'react-select'; and using a bundler like Webpack. And every time I have to add import 'react-select/dist/react-select.css';?

Is there another simple way?

clinyong on Mar 8, 2016

@mrconnormurphy you currently need to make sure you import the css - either the built .css file from /dist or you can include the .less or .sass versions into your own less or sass files (or import them directly with webpack loaders)

I’m thinking for simplicity of use, we might implement inline styles as an option, but that won’t be for 1.0

JedWatson on Apr 7, 2016

@mattparrilla it’s because if you read https://github.com/JedWatson/react-select/blob/master/package.json line 6 it says "style": "dist/default.css", but infact the dist folder does not contain default.css

thirdknife on Dec 4, 2015

There was css loader missing with the https://github.com/christianalfoni/webpack-express-boilerplate webpack configuration

    {
      test: /\.css$/,
      loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]',
      include: path.join(__dirname, 'app')
    },
    {
      test: /\.css$/,
      loader: 'style!css',
      include: path.join(__dirname, 'node_modules')
    }

Shouldn’t it be loading by default. Is this an issue with the module it self or just the config?

thirdknife on Nov 23, 2015