CODEWITHSUNDEEP
javascriptcssreactjs
Seagull
Seagull

Reputation: 1133

How to apply CSS style to custom React component

I created a demo react app with 'npx create-react-app my-app'. When I try to apply style to React component nothing happens, but when I apply it to a normal HTML tag like <div or <p> it works. I do not why.

I also tried adding :local in the css file like: :local(.taken-frame) 

// index.js =================        
import './style.css';


ReactDOM.render(
  <TakenFrame className="taken-frame"/>,
  document.getElementById('root')
);


// style.css ===============
.taken-frame{
  color: blue;
}

Upvotes: 3

Views: 13521

Answers (3)

Anthony Cregan
Anthony Cregan

Reputation: 983

I use the following style:

import styles from 'yourstyles.css'

...

 class TakenFrame extends React.Component {
       render(){
            return(
                <div className={styles.classNameDeclaredInCssFile}>
                </div>
            )
       }
 }

yourstyles.css file should look something like:

.classNameDeclaredInCssFile{
//... your styles here
}

In your case you are simply passing a property called "className" to your component but not using it. In your component if you did something like:

 class TakenFrame extends React.Component {
       render(){
            return(
                <div className={this.props.className}>
                </div>
            )
       }
 }

It would work I expect but I prefer to keep my styles assigned to each component, I find it adds confusion for me as a developer when I am passing styles around the component hierarchy a lot. I hope this helps.

Upvotes: 2

user8599269
user8599269

Reputation: 239

You could use styled components as-well. Please refer https://glamorous.rocks/basics

Upvotes: 0

Hemadri Dasari
Hemadri Dasari

Reputation: 33974

Css styles are applied to JSX elements in react but not to the component

Wrong way of applying css styles but className is still a valid prop to the component. You can access this using this.props.className and pass to the div as className like I mentioned in right way example

<TakenFrame className="taken-frame" />

Right way of applying css styles

 class TakenFrame extends React.Component {
       render(){
            return(
                <div className="taken-frame">

                </div>
                 //OR
               <div className={this.props.className}>

                </div>
            )
       }
 }

Upvotes: 3

Related Questions