CODEWITHSUNDEEP
cssreactjs
Valip
Valip

Reputation: 4610

React style by class name

I'm implementing a sidebar following this example but can't figure out how to apply the styles for each className...

This is what I've tried, but there are no styles applied...

Component:

import React from 'react';

import styles from '../stylesheets/menu.css';

var Parent = React.createClass({
  getInitialState(){
    return {sidebarOpen: false};
  },
  handleViewSidebar(){
    this.setState({sidebarOpen: !this.state.sidebarOpen});
  },
  render() {
    return (
      <div>
        <Header onClick={this.handleViewSidebar} />
        <SideBar isOpen={this.state.sidebarOpen} toggleSidebar={this.handleViewSidebar} />
        <Content isOpen={this.state.sidebarOpen} />
      </div>
    );
  }
});

var SideBar = React.createClass({
  render() {
    var sidebarClass = this.props.isOpen ? 'sidebar open' : 'sidebar';
    return (
      <div className={sidebarClass}>
        <div>I slide into view</div>
        <div>Me too!</div>
        <div>Meee Threeeee!</div>
        <button onClick={this.props.toggleSidebar} className="sidebar-toggle">Toggle Sidebar</button>
      </div>
    );
  }
});

export default Parent;

Styles:

.sidebar {
  position: absolute;
  top: 60px;
}
.sidebar-toggle {
  position: absolute;
  top: 20%;
}
.sidebar.open {
    left: 0;
}

webpack.config :

  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'css-loader'
      }
    ]
  }

Partial folder structure:

client
--stylesheets
----menu.css
--components
----Sidebar.js

Upvotes: 1

Views: 6214

Answers (1)

Simon
Simon

Reputation: 628

You are importing the styles as an object:

import styles from '../stylesheets/menu.css';

This can be used for CSS-in-JS, but in your case it will not work.

Try changing it to:

import '../stylesheets/menu.css';

And it should correctly apply the styles.

Upvotes: 3

Related Questions