How to inherit from a css file in react

Question

I believe this is very simple but I cannot find a solution to it. I am unable to inherit my css classes in my js file.

This is my render function from the js file:

render(){
    return(
        <div>
            <div className='smallSectionWrapper'>
                <div className='oneItem'>
                    <h3>Name</h3>
                    <p>John</p>
                </div>
                <div className='oneItem'>
                    <h3>Middle Name</h3>
                    <p>Johny</p>
                </div>
                <div className='oneItem'>
                    <h3>Surname</h3>
                    <p>Johnson</p>
                </div>
            </div>
        </div>
    )
}

This is my scss file:

.oneItem {
  width: 300px;
}
.smallSectionWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

What I expect to render:

What I actually render:

After inspecting this it appears that the classes are inherited but without the properties mentioned in the class. I'm fairly new to React so is it possible that I am missing a step?

I don't see any problem, to be honest! jsfiddle.net/qejx9rwv — Mahdi
– Mahdi, Commented Jan 1, 2021 at 16:35
I think you're missing the import css in your js file. import "./style.css"; — Nghi Nguyen
– Nghi Nguyen, Commented Jan 1, 2021 at 16:37
You should import the SCSS file on top of the javascript file. import './styles.scss' — Mahdi
– Mahdi, Commented Jan 1, 2021 at 16:40
Yup that was the case, altho I don't see the other js files on this project importing a css file. — Vasko Vasilev
– Vasko Vasilev, Commented Jan 1, 2021 at 16:42

Nikhil · Accepted Answer · 2021-01-04 05:16:51Z

1

you are missing import in .js file:

import '<<your scss path>>';

answered Jan 4, 2021 at 5:16

Nikhil

3,9785 gold badges20 silver badges34 bronze badges

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

Comments

Carl Davidson · Accepted Answer · 2021-01-04 05:11:41Z

The files / code you provided appear to work for me. Perhaps double check that you aren't using a different responsive layout inside of your console view

regarding styling: Make sure that if you are using SCSS inside your react App that you:

install node-sass (npm i/yarn add node-sass)
import the scss file into the correct file OR one that the component will be rendered as a child to.

i.e.

import React from 'react'
import './App.scss';

const Tester = () => {
    return (
        <div className='smallSectionWrapper'>
            <div className='oneItem'>
                <h3>Name</h3>
                <p>Carl</p>
            </div>
            <div className='oneItem'>
                <h3>Middle Name</h3>
                <p>Johny</p>
            </div>
            <div className='oneItem'>
                <h3>Surname</h3>
                <p>Johnson</p>
            </div>
        </div>
    )
}

export default Tester

Also consider using nested SCSS for specificity

.smallSectionWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .oneItem {
    width: 300px;
  }
}

You may wish to look into styled components as these will allow you to write your styling directly in the component which can be easier to extract the component for re-use in the future.

Collectives™ on Stack Overflow

How to inherit from a css file in react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related