I'm coding with small simple project of React. I have 2 components: login, register and 2 css for them: login_page, register_page. How can I import login_page for login, register_page for register without overriding the css?
Add a comment
|
3 Answers
Source - https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822
import React from 'react';
import registerCSS './register_page.css'; //stylesheet
import loginCSS './login_page.css'; //stylesheet
const DottedBox = () => (
<div className={registerCSS.container}>
<p className={loginCSS.content}>Get started with CSS styling</p>
</div>
);
your CSS should be like this
:local(.container) {
margin: 40px;
border: 5px dashed pink;
}
:local(.content) {
font-size: 15px;
text-align: center;
}
Example
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. Great article about css modules here.
import React from 'react';
import styles from './DashedBox.css';
const DashedBox = () => (
<div className={styles.container}>
<p className={styles.content}>Get started with CSS Modules style</p>
</div>
);
export default DashedBox;
Similar to css we import css file import styles './DashedBox.css' then we access to className as we access to object
:local(.container) {
margin: 40px;
border: 5px dashed pink;
}
:local(.content) {
font-size: 15px;
text-align: center;
}
:local(.className)-this when you use create-react-app because of webpack configurations .className-this if you use your own react boilerplate. To make CSS modules work with Webpack you only have to include the modules mentioned above and add the following loader to your webpack.config.js file:
. . .
{
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
. . .
Comments
you can use react-emotion; sample code is below in this way you can use CSS as a variable. If you load CSS from the file which will overwrite other CSS
import { css } from 'react-emotion';
const login = css`
display: block;
margin: 300px auto;
border-color: red;
z-index: 1`;
<Login className={login}/>
const register = css`
display: block;
margin: 300px auto;
border-color: red;
z-index: 1`;
<Register className={register}/>
The package "react-emotion" has been replaced by "@emotion/styled" in version 10. See https://emotion.sh/docs/migrating-to-emotion-10 for more information on migrating.
This package exists to redirect people to the @emotion/styled package and the Emotion docs
Comments
If I understand your question correctly then you're asking how to import other child components in a parent component without overriding existing style of the parent component.
If you want to apply parent component styles on child component then create a CSS file import it in the parent component and write generalized CSS classes for everything that you'll need in parent and child component like bootstrap classes and use these classes in both components.
For example, you have three components Login.js,Register.js and App.js and you have a CSS file App.css.Then your App.js would look like something this
import React from 'react';
import Login from './components/Login'
import Register from './components/Register'
import './App.css'
function App() {
return (
<div>
<div className="x"> some other elements</div>
<Login />
<Register />
</div>
);
}
export default App;
App.css would look like this
.x{
properties:values;
...
}
.btn{
properties:values;
...
}
....
here x, btn and other classes would be generic class that you can use.
4 Comments
Huy Vu The
Yes, I mean. But you give me an example
Huy Vu The
ok, if I write CSS for login component, login CSS will be overrided. I'm having trouble here
shubham jha
I have said you do not need to write separate CSS for Login, Register and App component write CSS for everything in App.css.
Huy Vu The
I know, is there any way to seperate them?