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 {}
Related
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 have two .jsx files that represent their respective components.
The first one is, Blog.jsx
import React from "react";
import '../assets/css/blog.css';
export const Blog = () => (
<div>
<h1>Hello Blog</h1>
</div>
)
With its respective CSS file, blog.css
div { background: #ff481f; }
and the second one is, Landing.jsx
import React from "react";
import '../assets/css/landing.css'
export const Landing = () => (
<div>
<h1>Hello Landing</h1>
</div>
)
With its respective CSS file, landing.css
div { background: #86ff2b; }
I have added routing and called instances of those two components on the App.js file which is the default file of a React application. After running the application, when navigated to components, I faced a problem that the background color is the same for both of the components (It loads landing.css only and never changes).
How can I fix that problem that each component only uses its respective .css file and loads it?
By default webpack and other build tools will compile all CSS files into one, even if css was imported in separate JSX files. So you can't use different CSS files and expect you don't affect on another part of page.
You have some options:
Use BEM for naming class names.
Use cssModules. In this case elements will have their own css class name and styles will not affect any other elements except if you use :global selector.
css-module
Using html tags as css selectors is a bad practice (because there is the behaviour you describe).
You should use only css classes or inline styles (using id's is another bad practise, id's have high priority).
div {
width: 20px;
height: 20px;
}
#id {
background: red;
}
.class {
background: green;
}
<div id="id" class="class"></div>
In case using css classes there is the same problem (when you have two similar classes). And this case is decided using css modules (set of rules of building) or you can use css-in-js (external library) which has its pros and cons. Also you can use BEM (methodology) and if your application is not big you can avoid this trouble.
css modules will add to your classes random hash and instead .my-awesome-class-name you will get .my-awesome-class-name-dew3sadf32s.
So, if you have two classes .class in the first file and .class in the second file in the end you will get two classes .class-dew23s2 and .class-dg22sf and you styles will resolve as expected.
css-in-js is a similar way except you should write your styles using javascript with some profits like including only those styles that are needed at the moment (what you are looking for right now) and several others.
You can code using pure css / scss / postcss / etc but many companies already choose between css modules and css-in-js.
BEM is just naming conventions for your class names.
And lastly - if you use inline-styles using react you should remember:
{} is constructor of object and {} returns new object on every call, it's mean if you write something like:
class MyAwesomeComponent extends Component {
render() {
return <div style={{color: "red"}}></div>;
}
}
or
class MyAwesomeComponent extends Component {
render() {
const divStyles = {color: "red"};
return <div style={divStyles}></div>;
}
}
div will re-render every time your render will call because div takes new prop.
Instead, you should define your styles (for example) in outside of your class:
const divStyles = {color: "red"};
class MyAwesomeComponent extends Component {
render() {
return <div style={divStyles}></div>;
}
}
Don't define your css using HTML tags because it will affect your entire application.
use className,id or inline styling.
like- App.css
.myApp{ color: red;}
#myApp2{ color: blue;}
App.js
import './App.css'
<div className="myApp">color changed by className</div>
<div id="myApp2">color changed by id</div>
<div style={{color:'red'}}>color changed by inline object styling</div> // inline styling
This is not the best solution if you are looking forward to improve yours css imports/loads.
However could be the best solution if you dont want to go in deep in css, resolve the problem fast and keep working with HTML tag.
You can add a div for each component, define an Id for the div and wrap the component. Afterwards in the component's css fies you are going to define all the styles starting with the #id so all the css classe or HTML tag will affect just the corresponding component.
//App render in root
ReactDOM.render(
<App />,
document.getElementById('root')
);
//App
function App(props){
return [
<Blog />, <OtherComponent />
]
}
//Blog component
function Blog(props){
return <div id="blog">
<h1>I am Blog</h1>
</div>
}
//Other component
function OtherComponent(props){
return <div id="otherComponent">
<h1>Im am other component</h1>
</div>
}
/* blog.css*/
#blog h1{
color:yellow;
}
/* otherComponent.css*/
#otherComponent h1{
color:green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
import React, { Component } from "react";
import './navbar.css'
class NavBar extends Component {
render() {
return (
<div>
navbar stuff
</div>
);
}
}
export default NavBar;
If I were to import NavBar to another file and place it.
import React, { Component } from "react";
import NavBar from './NavBar'
import './randomfile.css'
class somefile extends Component {
render() {
return (
<div id="test">
<NavBar />
</div>
);
}
}
export default somefile;
How do I prevent the CSS to affect my navbar? I'm trying to work with components but I've fallen into a bunch of CSS on my components when I just want the CSS i have in my NavBar file
randomfile.css
#test div {
text-align: left;
}
^ Makes everything under div align to the left
it depends on how the other css files are written like if they use very general rules such as elements matches so there is no way to prevent 100%. However you can minimize the impact by using.
Follow BEM for your styles, http://getbem.com/, so your styles will be tighter and it is usually specific for your components.
Use css in js libraries like styled-components, https://www.styled-components.com/, this way your css rules will be very strong and it is often enough to rule other rules outside.
I my self used to use BEM before, recently I have adopted css in js and been using styled components for most of my projects recently and it works quite well.
I am using modular css in react. I have to addClass to a <h2> how do I do that the problem is I am using modular css I know how to do it in normal css.Please Help.
Here is my component
import React, { Component } from 'react';
import style from '../css/MessageHeader.css';
class MessageHeader extends Component {
constructor(props) {
super(props);
this.state = {
name : "name"
}
}
render(){
return(
<div className={style.container}>
<div className={style.iconWrapper}>
<i className ="fas fa-angle-left"></i>
</div>
<div className={style.profileWrapper}>
<h2 className={this.state.name}>john appleseed </h2> //this is how I would in normal css
</div>
</div>
);
}
}
export default MessageHeader;
This would help you add the className this way. Variable is any variable in state with classname
<h2 className={`${this.state.variable}`}></h2>
While you can use a global class, I'm assuming you also want the h2 classes to be scoped to that component. Just like your other classes, you need to reference the style import - but use a dynamic key based on the state, like so:
<h2 className={style[this.state.name]}>john appleseed </h2>
Then your css module MessageHeader.css should contain a class for all names that you want to custom styling for.
Example:
.container {
// some styles here
}
.johnAppleseed {
color: yellow;
}
// You can also specify a name as a child of the container just like normal css,
// although it's not really necessary
.container .bobBobbert {
color: red;
}
Keep in mind that if your name in the state has spaces, that isn't going to work for a css class name, so you'll have to do some transformation (e.g. this.state.name.replace(...) to remove spaces and/or punctuation.