Can't use css Id or class to style react component

Prerequisites

• Using yarn
• Using node 10.x
• Using an up-to-date master branch
• Using latest version of devtools. See wiki for howto update
• Tried solutions mentioned in #400

Expected Behavior

Apply css styling to react component

Current Behavior

No css styles is applied. However if I import css file import Sidebar from './Sidebar.css' and apply add the class to the element like <div id = {Sidebar.sidebar}></div> then it works.

Steps to Reproduce (for bugs)

1. Create react component

import React, { Component } from 'react';
import './Sidebar.scss';
export class Sidebar extends Component {

  render() {
    return (
      <div id = 'sidebar'>
        <h1>Sidebar</h1>
      </div>
    )
  }
}

export default Sidebar;

1. Create css styling for the component

#sidebar, .sidebar {
  width: 30%;
  background-color: navy;
}

Context

Trying to learn how to build cross platform application using React and Electron.

Environment

• Node version : v10.15.2
• Version or Branch used : master
• Operating System and version : Windows 10
• Link to your project :

[larissa-n]

Not exactly, but maybe this helps: The webpack config determines how css is imported. This project uses css modules, meaning:

• import styles from 'app.css' and <div className={styles.classname}> in your component
• loader: 'css-loader', options: { modules: true } in webpack.config.renderer.dev.babel.js

That’s generally the cleaner way to do.

What you are looking for is global css:

• import 'app.css' and <div className={classname}> in your component
• loader: 'css-loader', options: { modules: false } in webpack.config.renderer.dev.babel.js (or just no modules option, will be false by default)

Many components rely on global css styling. You can only use one method or the other, so it’s an important distinction to make.

[reZach]

@tufailra97 Based on this answer, https://stackoverflow.com/a/36844502/1837080, your app is looking for css files in the app directory. This is why in app/index.js, the call import './app.global.css' works but not in a custom component.

What I think will work for you is using this code in your component: import styles from './Sidebar.scss'; and then when you want to use the style in the component,… <div id={styles.sidebar}>...</div>. If you need to intermix css classes, look to this answer: https://stackoverflow.com/a/43552631/1837080.