I'm using version 3 of the create-react-app package. But my styles don't apply
import style from './App.css'
Add a comment
|
6 Answers
Save your css file with module extention.
App.module.css
Then import it like this:
import style from './App.module.css'
Finally, apply your styles like this:
<div className={style.container}> Hello World! </div>
1 Comment
GrillOwner69420
I get an error on the line className={style.container}
Cannot find name 'style'.ts(2304) what do I do? Using React version 17.0.1Please read this link talking about adding a stylesheet to CRA. https://create-react-app.dev/docs/adding-a-stylesheet/
In summary, you should write import './App.css'
Comments
If you want to apply styles easily to your existing code, you can use the patch-styles package. See the example of usage in StackBlitz. It's introducing a more declarative way for applying styles you need to wrap your code with <PatchStyles classNames={style}> where style is the default import from the style module.
Comments
For example we have to files like
Button.module.css
.error {
background-color: red;
}
another-stylesheet.css
.error {
color: red;
}
**How to Use? **
import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet
class Button extends Component {
render() {
// reference as a js object
return (
<div>
<button className={styles.error}>Error Button</button> // Use
Module css
<button className="error">Error Button</button> //normal css
file
</div>
);
}}
Comments
I guess you just want to import and apply the styles, right?
If you want to just use the css you can just import it, like this:
import './App.css'
And it will be applied!
1 Comment
elham rajai rad
No. I want to use the css module.<button onClick={this.toggleHandler} className={style.red} >Toggle</button>
Try this.
import './App.css';
add your code.
