Importing css in JSX file

Question

I am trying to import css styles into js file, but i cannot use styles properly

in my file Graph.js:

import React from 'react';
import styles from './Graph.css';
import Center from './Center/Center'

class Graph extends React.Component {

    render(){
        return(
            <div className={styles.graph}>
                <Center>test</Center>
            </div>
        );
    }
}

export default Graph;

I try to use style from file Graph.css which looks like this:

.graph {
    height: 500px;
    width: 500px;
    border: 1px solid grey;
}

Is there a possibility to manage importing styles to components this way?

without bundler - no. Use webpack or rollout to manage it

Evgeniy
– Evgeniy

2019-06-07 08:29:22 +00:00
Commented Jun 7, 2019 at 8:29 — Evgeniy
– Evgeniy, Commented Jun 7, 2019 at 8:29

Sina · Accepted Answer · 2019-06-07 08:29:19Z

4

your import statement should be import './Graph.css'; and in component <div className="graph">

answered Jun 7, 2019 at 8:29

Sina

1,1451 gold badge11 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zhulien · Accepted Answer · 2021-03-02 13:17:27Z

4

You are probably confusing react and react-native.

In react, you don't need to styles.graph.

Rather doing the way you do it in normal .html file would work

import React from 'react';
import styles from './Graph.css';
import Center from './Center/Center'

class Graph extends React.Component {
    render() {
        return (
            <div className="graph"
                <Center>test</Center>
            </div >
        );
    }
}

export default Graph;

edited Mar 2, 2021 at 13:17

zhulien

5,8154 gold badges25 silver badges41 bronze badges

answered Jun 7, 2019 at 8:33

Alwaysblue

12.2k45 gold badges144 silver badges257 bronze badges

2 Comments

JkAlombro Over a year ago

is it even possible to do import styles when he don't have export default styles in his css?

Alwaysblue Over a year ago

That happens through WebPack File Loader plugin`. Javascript in itself does not have the concept of importing and export css or image file using import statement

Shubham Verma · Accepted Answer · 2019-06-07 10:02:59Z

0

You need to import file directly i.e import './Graph.css' and use it as normal class on div or whenever you want. There are other ways to stlye element such as inline style and more. You can explore more here . https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822 (its great article)

answered Jun 7, 2019 at 10:02

Shubham Verma

5,0641 gold badge12 silver badges23 bronze badges

Comments

XeniaSis · Accepted Answer · 2021-03-02 13:35:24Z

0

You are missing an important css rule option in your webpack config.

{
    loader: 'css-loader',
    options: {
        modules: true,
        camelCase: true
    }
}

Add this options object in order to import styles. The modules option let you enable to use your css as a style object and camelCase option enables using "some-class" as someClass.

Hope this will help.

edited Mar 2, 2021 at 13:35

XeniaSis

2,3745 gold badges26 silver badges41 bronze badges

answered Jun 7, 2019 at 8:47

Sanjay Bisht

861 silver badge7 bronze badges

Collectives™ on Stack Overflow

Importing css in JSX file

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related