I have multiple stylesheets. Let's say navbar.css and footer.css. I want to use the pseudo-element :root in both of these css files to define variables. However, I don't want the variables to be accessible to the other css file. When I use both of these components, the css files merge together and my styles clash. How can I prevent this?
App.jsx
---
import React from "react";
import Navbar from "./Navbar";
import Footer from "./Footer";
export default class App extends React.Component {
render() {
<Navbar/>
<p>blah blah</p>
<Footer/>
}
}
Navbar.jsx
---
import React from "react";
export default class Navbar extends React.Component {
render() {
<div>...</div>
}
}
Footer.jsx
---
import React from "react";
export default class Footer extends React.Component {
render() {
<div>...</div>
}
}
Navbar.css
---
:root {
bg-col: white;
}
Footer.css
---
:root {
bg-col: black;
}
Now, I have shortened these files to keep it simple, but, the bg-col variables clash with each other. How can I fix this?
You can try with CSS module. In that way, one css file is separate and independent from another. Maybe add a class to that root element and the problem is solved.
Create two files
Navbar.module.css
Footer.module.css
and in your Navbar.jsx and Footer.jsx just import these modules.
Navbar.jsx
---
import React from "react";
import styles from './Navbar.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet
export default class Navbar extends React.Component {
render() {
<div className={styles.root}>...</div>
}
}
Related
first of all thank you so much for your time.
My doubt is simple, but i couldn't find a way to get it working.
So... basically i have a '/pages/_app.js' file:
import '../public/styles/global.css';
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
A global css file '/public/styles/global.css':
:root {
--bg-color: #000;
}
A css module file '/public/styles/header.module.css':
.header {
background-color: var(--bg-color);
}
And finally a home page '/pages/index.js'that uses the css class:
import React from 'react';
import headerStyle from '../public/styles/header.module.css';
export default function Home() {
return <div className={headerStyle.header}>Test</div>;
}
I don't get an error but i didn't manage to refer to the global variables inside the css modules.
Can you guys help me with what am i doing wrong?
If the pages/ directory exists under src/ then the path to the <Home> component should be /src/pages/ and the import for the headerStyle should be the following:
import headerStyle from "../../public/styles/header.module.css";
You just need to go up one more directory.
/*
* #filename /src/pages/index.jsx
*/
import React from "react";
import headerStyle from "../../public/styles/header.module.css";
const Home = () => {
return <div className={headerStyle.header}>Test</div>;
};
export default Home;
Here is a CodeSandbox snippet to demonstrate.
I create a simple react/electron project with "electron-forge" plugin : electron-forge init myProject --template=react. I try to import my css file with this code below
Button.module.css
.error {
color: red;
}
app.jsx - created by electron-forge:
import React from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
export default class App extends React.Component {
render() {
return (
<div>
<h1>Hello world</h1>
<button className={styles.error}>Error Button</button>
</div>
)
}
}
It throws an error:
Uncaught Error: Couldn't find a compiler for /home/denny/Experimentals/electron-transactionsell/src/Button.module.css
I'm pretty sure I have the file in the correct folder
and I am sure that this is how it's done in React
https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet
I am writing a class in React and exporting it with a higher order component, presently I have ...
import React, { Component } from 'react';
import { withRouter } from 'react-router';
/**
Project Editor
*/
class SpiceEditorRaw extends Component { ... }
const SpiceEditor = withRouter(SpiceEditorRaw);
export default SpiceEditor;
Then In a different file I import SpiceEditor and subclass it with
import SpiceEditor from './SpiceEditor'
class NameEditor extends SpiceEditor {
constructor(props){ ... }
...
render () { return (<h1> hello world <h1/>) }
}
However I am getting error:
index.js:2178 Warning: The <withRouter(SpiceEditorRaw) /> component appears to have a render method, but doesn't extend React.Component. This is likely to cause errors. Change withRouter(SpiceEditorRaw) to extend React.Component instead.
I believe it is possible to create a compoenent using withRouter, so I must be syntaxing incorrectly?
You should generally not use extends on any other component than React.Component. I think the Composition vs Inheritance part of the documentation is a great read on this subject.
You can accomplish almost everything with composition instead.
Example
import SpiceEditor from './SpiceEditor'
class NameEditor extends React.Component {
render () {
return (
<SpiceEditor>
{ /* ... */ }
</SpiceEditor>
)
}
}
I'm currently working on a web project using NodeJS and ReactJS. I wanted to have two components in a single file because they will use the same pieces of information. One of the component is using withRouter to handle the "this.props.history.push". Since I don't know the syntax to deal with my 2 conditions (withRouter + double export) I'm looking for your help.
I get the error :
Failed to compile
./src/App.js
284:83-110 './components/Dnoc_cvat.js' does not contain an export named 'Dnoc_cvat_bouton_withRouter'.
And in my App.js I wrote :
import {Dnoc_cvat_bouton_withRouter} from './components/Dnoc_cvat.js'
Dnoc_cvat.js :
import React from 'react'
import {withRouter}from 'react-router-dom';
class Dnoc_cvat extends React.Component {
render() {
return(
<h3> DNOC - CVAT </h3>
)
}
}
class Dnoc_cvat_bouton extends React.Component {
constructor(props) {
super(props);
this.handleClick=this.handleClick.bind(this);
}
handleClick(){
this.props.history.push('/DNOC/CVAT');
}
render() {
return(
<div className='component-button' onClick={this.handleClick} >
<p>Hello world</p>
</div>
)
}
}
module.exports={
Dnoc_cvat:Dnoc_cvat,
Dnoc_cvat_bouton_withRouter:withRouter(Dnoc_cvat_bouton)
}
module.exports works only in Node.js.
For the browser, you will need the following export syntax:
import React from 'react'
import { withRouter } from 'react-router-dom'
export class Dnoc_cvat extends React.Component {
...
}
class Dnoc_cvat_bouton extends React.Component {
...
}
export const Dnoc_cvat_bouton_withRouter = withRouter(Dnoc_cvat_bouton)
I am creating a helper class in react. The image below shows my setup:
In my App.js, I have:
import Helpers from './Helpers.js'
I have also tried:
import Helpers from './components/Helpers.js'
import Helpers from 'src/components/Helpers.js'
import Helpers from './components/Helpers.js'
import Helpers from 'src/components/Helpers.js'
import {Helpers} from './components/Helpers.js'
import {Helpers} from 'src/components/Helpers.js'
and I have also tried, in my Helpers.js:
export default Helpers
export default Helpers();
However, I receive an error message:
'./Helpers.js' does not contain an export named 'Helpers'.
It seems as though App.js can not find and locate this class. How can I import it, so i can just call the functions, like:
Helpers.helperFunctionHere();
thanks.
Option 1: Export each function individually
In Helpers.js
export function helperFunctionHere() {
console.log("hello there");
}
In App.js
import {helperFunctionHere} from "./Helpers";
render() {
helperFunctionHere();
}
Option 2: Static properties on the class
In Helpers.js
class Helpers {
static helperFunctionHere() {
console.log("hi");
}
}
export default Helpers
In App.js
import Helpers from "./Helpers";
render() {
Helpers.helperFunctionHere();
}
Should be export default Helpers. Am also assuming that your bundler is setup correctly.