Importing styles in multiple components on React

Question

I am using TypeScript with React on Rails.

My SCSS file is in same folder with tsx files and this scss file import all necessary modules. So i have a one big css file at the end.

I also have 42 components. Every component has a html code that renders. So, I import styles in components like this:

import * as styles from 'main.module.scss';

Problem is, my page loads fast. But styles are delayed a bit. At first i see html dom object without styles then styles applied. This wonders me that, does React loads my scss styles 42 times or just once and re-use on each components?

If not how can i globally import styles and use across all components?

sample component

import * as styles from 'main.module.scss';

...

render() {

  return (
    <div className={styles.container}>

       <div className={styles.pageInner}>
          content...
       </div>
    </div>
  )
}

you just need to import the global style in the top level js file, for example app.js, only for the module css you need load it every time in each component. — Spark.Bao
– Spark.Bao, Commented Apr 12, 2019 at 4:06
TypeScript is strict so when i import at top level, child components cant see styles variable. I needed to import all the time — Dennis
– Dennis, Commented Apr 12, 2019 at 4:07
can you paste some code which show how you use the style in the component? I guess you mix the global css and module css. — Spark.Bao
– Spark.Bao, Commented Apr 12, 2019 at 4:08
btw it is a main.module.scss and i export styles with typing extension — Dennis
– Dennis, Commented Apr 12, 2019 at 4:18

Spark.Bao · Accepted Answer · 2019-04-12 09:41:20Z

1

does React loads my scss styles 42 times

I just did the experiment, the answer is no. although this, it is still not recommended to put all styles in a file. I think you should separate your main.module.scss to many small files.

there are 2 kinds of CSS style.

one is a global style which shared by multiple components, for example, you define it in global.scss file, this file is just needed to import once at the top level js file.

// global.scss
.container {
  padding: 10px;
}

// applicaiton.js
import "global.scss"

// ExampleComponent.jsx, don't need to import "global.scss"
// className should be the string
...
render() {
  return <div className='container'>example</div>
}

another one is a module style which is only used by a component or a very few components, and it should just include the styles only used in the target component, it is usually small and has the same name as the component.

// ExampleComponent.module.scss
.container {
  margin: 10px;
}

 // ExampleComponent.jsx
import * as styles from 'ExampleComponent.module.scss'

...
render() {
  return <div className={styles.container}>Example</div>
}

if you want to mix the global style and module style in the same element, you can use classnames npm or like this:

 // ExampleComponent.jsx
import * as styles from 'ExampleComponent.module.scss'

...
render() {
  return <div className={`container ${styles.container}`}>Example</div>
}

edited Apr 12, 2019 at 9:41

answered Apr 12, 2019 at 8:21

Spark.Bao

5,7733 gold badges35 silver badges38 bronze badges

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

2 Comments

Dennis Over a year ago

gotcha. I was using modules because 1) It obfuscate/shorten class names. (helpful for size+load time) 2) I generate typings so that styles.classN <= autocompletes in VSCode. Is there a way to import global.scss globally and use like styles.container in all components so my IDE knows it is

Spark.Bao Over a year ago

as my understanding, nope.

lmiller1990 · Accepted Answer · 2019-04-12 04:03:16Z

0

Are you using webpacker or a similar gem to manage this? Webpack is smart enough to reuse imports - it won't include it a ton of times.

That said, since CSS is global, you only need to import main.scss once anyway, at the top level.

answered Apr 12, 2019 at 4:03

lmiller1990

9552 gold badges13 silver badges23 bronze badges

2 Comments

Dennis Over a year ago

yes, im using webpacker. TypeScript is strict so when i import at top level, child components cant see styles variable. I needed to import all the time.

lmiller1990 Over a year ago

what do you mean "typescript is so strict"? How are you writing your code (TS should not have any knowledge about sass variables).

Ajay Gupta · Accepted Answer · 2019-04-12 04:25:12Z

0

Since you are using webpack, one option would be to compile Scss to plain CSS and include it as a stylesheet in the root HTML page, most likely, index.html

answered Apr 12, 2019 at 4:25

Ajay Gupta

2,0432 gold badges23 silver badges40 bronze badges

Collectives™ on Stack Overflow

Importing styles in multiple components on React

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related