CODEWITHSUNDEEP
javascriptjqueryhtmlcssreactjs
Z.Clemens
Z.Clemens

Reputation: 5

React not rendering css styles

I am trying to add a dropdown menu to my application and I picked Selectize (https://github.com/furqanZafar/react-selectize). But it appears that it is not displayed correctly on the page. This is what is looks like, it seems that the css styles are missing. I am quite a rookie to React so please bear with me if this is not a smart question. Thanks in advance!

webpack.config.js

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
  context: __dirname,

  entry: './assets/js/index', 

  output: {
      path: path.resolve('./assets/bundles/'),
      filename: "[name]-[hash].js",
  },

  plugins: [
    new BundleTracker({filename: './webpack-stats.json'}),
  ],

  module: {
    loaders: [
      {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets:['react'] }}, 
      {test: /\.css$/, loader: 'style-loader'},
      {test: /\.css$/, loader: 'css-loader', query: { modules: true, localIdentName: '[name]__[local]'}},
    ],
  },

  resolve: {
    modulesDirectories: ['node_modules', 'bower_components'],
    extensions: ['', '.js', '.jsx']
  },
}

Dropdown.js

import {ReactSelectize, SimpleSelect, MultiSelect} from 'react-selectize';
import React from 'react';
import 'react-selectize/themes/index.css'


export default class Dropdown extends React.Component {
    render() {
        return (
            <SimpleSelect placeholder="Select a fruit" onValueChange={value => alert(value)}>
                <option value = "apple">apple</option>
                <option value = "mango">mango</option>
                <option value = "orange">orange</option>
                <option value = "banana">banana</option>
            </SimpleSelect>
        )
    }
}

index.js

import Dropdown from "./components/dropdown"

var React = require('react')
var ReactDOM = require('react-dom')

ReactDOM.render(<Dropdown />, document.getElementById('container'))

The following error was in the console:

Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have 
refs. You might be adding a ref to a component that was not created 
inside a component's `render` method, or you have multiple copies of 
React loaded

Upvotes: 0

Views: 4940

Answers (1)

David Fusilier
David Fusilier

Reputation: 301

For many react components, relevant CSS is included in the npm module, but cannot be loaded via import since they are not JS. Usually the styles have to be loaded separately.

The docs say:

to include the default styles add the following import statement to your > stylus file: @import 'node_modules/react-selectize/themes/index.css'

Did you include that? If you aren't using Stylus, you could just grab the css and paste it into your main CSS file.

Upvotes: 1

Related Questions