this may code.
import { CompaniesLogo,navigation,NavLinkGroup } from "./Navigation.module.css";
How can I import the needed classes from css into React ?
That's the way how you need to use as suggested by #qaismakani.
But if you want to component specific styles you can try react-jss
You don't have to explicitly import individual css classes. Import your css file like this:
import "./Navigation.module.css";
and then just start using your css classes.
In your Navigation.module.css file you'll have class styling normally (I assume) like this:
.CompaniesLogo {
// styles here
}
.navigation {
// more styles here
}
. NavLinkGroup {
// even more styles here
}
At the top of your react component file you'll import the css file like #qaismakani mentioned:
import "./Navigation.module.css";
Then, you'll use that css file just like you would in normal HTML, but instead of the class attribute you'll use className instead:
<div className="navigation">This is a navigation Div</div>
Is it possible to access css classes from css modules in a specific css stylesheet? For example I have mediaQueries.css witch I want to connect at the end of my markup of components, but I can't see within mediaQueries.css private classes of aboute.module.css or index.module.css. So how can I configure webpack or what can I do?
Import them as an object and reference the classes as properties:
import styles from "./path/to/stylesheet.module.css";
export default function Component() {
return <div className={styles.className}>hello world</div>
}
Example CSS:
.className {
color: red;
}
For regular stylesheets just import the CSS file:
import "./path/to/stylesheet.css";
I'm using react with sass.
It's look like both have same benefits.
Locally scoped, No more conflict etc. What is the main diffrence between
style.scss
vs
style.module.scss
Why do we need .module prefix?
Short Answer
*.scss is normal SCSS file while *.module.scss is SCSS file with CSS modules.
According to the repo, CSS modules are:
CSS files in which all class names and animation names are scoped locally by default.
This solves the problem of typing ultra specific CSS class names to avoid clashes. Good bye .phone-page-contact-form-edit-card-default-button-blah-blah and hello .default-button
Usage
Below is the usage for *.scss
.ultra-specific-class-name_item {
display: flex;
}
If you use SCSS in a normal way, you must declare the class name as a string
// Simply import
import './foo.scss';
const App = () => (
<div className="ultra-specific-class-name_item">
foo bar
</div>
)
Below is the usage for *.module.scss
// No need of any ultra specific classnames
.item {
display: flex;
}
If you use SCSS as a CSS module, you must use them as how you would use a JS module.
// import as a js module
import styles from './foo.module.scss';
const App = () => (
<div className={styles.item}>
foo bar
</div>
)
Output
<!-- Normal SCSS -->
<!-- it will not be transformed -->
<div class="ultra-specific-class-name_item">foo bar</div>
<!-- SCSS with Class Module -->
<!-- hash values are suffixed to the class name -->
<div class="item-35ada5">foo bar</div>
<!-- newer versions will even prefix the file name
to the class name -->
<div class="foo__item-35ada5">foo bar</div>
I have header.js file like this:
import React, {Component} from 'react';
import Classes from '../css/style.css';
class Header extends Component {
render() {
return (
<header>
<div className={Classes.logo}>Logo</div>
</header>
)
}
}
export default Header;
the problem the class name logo is not loaded, after inspect this in the browser the html appear like this:
<div>Logo</div>
why is that ?
I haven't seen CSS classes used this way in React before. Does this this work?
return (
<header>
<div className="logo">Logo</div>
</header>
)
This assumes you have a .logo class in your style.css and your bundler is configured to handle CSS.
Using {Classes.logo} would imply you have some stateful object named Classes with a logo property
All you have is imported a CSS file, which has no dynamic state, therefore you only need a string of the classes to load on this tag
className="logo"
Where the CSS has
.logo {}
I have several components which have the following CSS/component structure
About/style.css
.AboutContainer {
# Some style
}
p > code {
# Some style
}
And I import the CSS in the componet as follows
About/index.js
import './style.css';
export default class About extends Component {
render() {
# Return some component
}
}
However, the CSS is imported in the <header> section and stays global-scope.
I was expecting CSS to be:
Component-scoped in a way that the style is only applied to things that are only rendered within this component.
Style for this component would disappear if the component is unmounted.
However, when inspecting from the browser, the styles are specified at the <header> section and gets applied to all the components
<header>
// Stuff
<style type="text/css">style for component About</style>
<style type="text/css">style for component B</style>
<style type="text/css">style for component C</style>
// Stuff
</header>
How do I import CSS to be component-scoped? It seems like I'm understanding CSS import in React ES6 incorrectly.
I was following this tutorial
Edit
Answer by Brett is correct. However, my problem turns out to be somewhere else. I created my app using create-react-app which basically simplifies setups required to do React. It include WebPack, Babel and other things to get started. The default WebPack config that it uses did not set module option for the css-loader so it defaulted to false, and as a result the local-scoping was not enabled.
Just for additional info, it seems like create-react-app does not have straightforward way to customize WebPack config, but there seem to be numerous how-to workarounds on the web.
It sounds like CSS Modules, or many of the other CSS-in-JS packages, does what you want. Others include Emotion (my current favorite), Styled Components, or many of the packages here.
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. All URLs (url(...)) and #imports are in module request format (./xxx and ../xxx means relative, xxx and xxx/yyy means in modules folder, i. e. in node_modules).
Here's a quick example:
Let's say we have a React component like:
import React from 'react';
import styles from './styles/button.css';
class Button extends React.Component {
render() {
return (
<button className={styles.button}>
Click Me
</button>
);
}
}
export default Button;
and some CSS in ./styles/button.css of:
.button {
border-radius: 3px;
background-color: green;
color: white;
}
After CSS Modules performs it's magic the generated CSS will be something like:
.button_3GjDE {
border-radius: 3px;
background-color: green;
color: white;
}
where the _3DjDE is a randomly generated hash - giving the CSS class a unique name.
An Alternative
A simpler alternative would be to avoid using generic selectors (like p, code, etc) and adopt a class-based naming convention for components and elements. Even a convention like BEM would help in preventing the conflicts you're encountering.
Applying this to your example, you might go with:
.aboutContainer {
# Some style
}
.aboutContainer__code {
# Some style
}
Essentially all elements you need to style would receive a unique classname.
Maybe react-scoped-css will help. Btw, I'm the author of this lib, if you find anything broken or simply want to improve it, you can always raise an issue or send a pr.
Because you mentioned you used create-react-app, the solution here is quite easy change just style.css to style.module.css, it will look like this:
import styles from "./style.module.css"
<button className={styles.button}>blabla</button>
More info on this article:
https://blog.bitsrc.io/how-to-use-sass-and-css-modules-with-create-react-app-83fa8b805e5e
You can use SASS (.scss) to imitate scoped CSS.
Say you need to use bootstrap in only one component (to avoid conflicts). Wrap the component in <div className='use-bootstrap'> and then created a .scss file like so:
.use-bootstrap {
// Paste bootstrap.min.css here
}
Use this file naming convention [name].module.css
and see documentation: https://create-react-app.dev/docs/adding-a-sass-stylesheet
JSX File
import React from 'react';
import styles from './index.module.scss';
const MyPage = () => {
return (
<div className={styles}>
<h1>My Page</h1>
</div>
);
};
export default MyPage;
Styles File
h1 {
color: #f3f3f3;
font-family: "Cambria";
font-weight: normal;
font-size: 2rem;
}
For me, the simple solution (without using: Css-modules or css-in-js) is to add a suffix to your class selectors like this:
className="btn__suffix"
if your component is named: FileUpload.tsx so your __suffix would be __fu, i took the first character of each word (here: File and Upload).
the end result would be:
import './style.css';
export default class About extends Component {
render() {
Return (
<div className="container__fu">
...
</div>
)
}
}
And in the Css part, your file would be:
.container__fu {
...
}
I created a rollup plugin to have scoped scss/css within a vite react project with regular import, you can check it out if it can solve your issue!
https://www.npmjs.com/package/rollup-plugin-react-scoped-css