Hello guys so this is my problem , i have one page in react called 'Page1.js' that has one <div className='container' >, and this Page1.js imports css style from another file called page1.css with
import './page1.css'.
in this page1.css i make one class called '.container' that has properties like
.container {
background-color:blue
well so far there is no problem, my div is with it's background blue as it supposed to be.
The problem starts when i make another page like 'page2.js' and i make another div with a class having the same name...
So for example if i make one div <div className='container' > in this new 'page2.js' automatically this div will have it's background blue. But i didn't import the file 'page1.css' on my 'page2.js'.
My questions are:
why my page2.js that has no import for my file page1.css is getting the properties for the classes ?
Is there anyway for me to be using classes css with the same name on diferent jsx pages and the classes not be overwriting each other ?
for to escape from this problem now, for each class that i create i put the name of the page in the class like-------------> page1-container {background-color:blue} is that the right thing to do ?
This is because CSS is globally applied when you called import from the previous file.
The import is just a hint for webpack (or maybe some other bundler) to create a separate css file.
To make it private and only available for the file with the import you have to use css.modules <assuming you're using Create react app>
Try to make an experiment. Rename the file from page1.css -> page1.module.css
and import the style from this file like this:
import styles from "./page1.module.css"
and apply it:
<div className={styles.background}>Test </div>
Related
I have five-page folders. each folder has a CSS file and a js file. each js file is importing a component. that component is wrapped in the CSS class name. every time I try to style using an element like body or form, my styling on all other pages is overridden.
the only way I can style the body is by putting the styling in a class and wrapping it around the component. there has to be a better way. I'm trying to animate my screen and it takes a lot of styling elements directly.
import LandingPageComponent from "../../components/LandingPageComponent"
function LandingPage(){
return(
<div className=".landingpage">
<LandingPageComponent />
</div>
)
}
export default LandingPage; ```
I am trying to find the best solution for overriding the default 'Nova' theme used for Prime React. I am aware they have a theme designer available to purchase however I would ideally like to not use that.
Previously I was having a scss file with every tsx file in my react application. I was using lines such as -
.p-dropdown-trigger {
background-color: brown !important;
margin-left: 5px !important;
}
I was basically putting !important everywhere and it began to get very messy.
I have thought about commenting out the import for the Prime React theme in my index.tsx file
// import 'primereact/resources/themes/nova/theme.css';
And importing my own scss instead..
import './styles/Override.scss';
This makes the styling disappear completely and the page looks like it's purely html. I am thinking maybe I should copy all the code from the Nova theme file and then slowly start adjusting it in the override file.
Has anyone got a better way or any ideas?
Thanks
One option like you said is to copy all of the css over, and then hide their import. That may be more work than you need depending on what you're trying to do.
I would probably rather create an override.scss and specifically overwrite rules, which with scss nesting shouldn't get too crazy. But one tip to avoid using !important is to be more specific with the way you target HTML elements. For instance, if there is a CSS rule of
body header ul a { color: pink; }
then you can override a rule by being more specific and write:
body header ul li > a { color: blue; }
However if the rule you're trying to overwrite has !important in it, then you'll have to use !important in your new rule overwrite it.
Hmm, maybe I could help more if I had access to more code e.g. in codesandbox.io.
Do you try some modular CSS solution? Like Styled-jsx or Styled-Components?
If you would like to use styled-components, this answer could be helpful. PrimeReact and styled-component
A different solution could be, link the stylesheet with PrimeReact before your own stylesheet (inside of your HTML). This solution will require a deep analysis of the style implementation by the webpack.
Hope I could help somehow :)
Later CSS imports that come after the theme will override the templates as the last CSS rule has higher specificity (precedence) in CSS
In the following of a create-react-app index.tsx (typescript .js), index.css will override the imported prime themes but CSS imports in the child React "App" component will not override the theme because it is imported first. (And the last applicable CSS is the one that gets used unless you override with !important.)
import React from "react";
import ReactDOM from "react-dom";
import reportWebVitals from "./reportWebVitals";
import App from "./App";
import "../node_modules/primereact/resources/themes/saga-blue/theme.css";
import "../node_modules/primereact/resources/primereact.min.css";
import "../node_modules/primeicons/primeicons.css";
import "./index.css";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
You can make your React component's CSS (like "App") override the React Prime theming by importing the theme CSS as the first thing, then components after making their CSS later and higher precedence.
import "../node_modules/primereact/resources/themes/saga-blue/theme.css";
import "../node_modules/primereact/resources/primereact.min.css";
import "../node_modules/primeicons/primeicons.css";
import React from "react";
import ReactDOM from "react-dom";
import reportWebVitals from "./reportWebVitals";
import App from "./App";
import "./index.css";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
I am new to ReactJS , I was reading about how to enable CSS modules and what i came to is:
If you add .module it will add a base64 hash string to the name of classes used
Actually i created a function-based component Layout.js
import React from "react";
import classes from "./Layout.module.css";
const layout = props => <div className={classes.bg}>Here first div</div>
export default layout;
and css file as Layout.module.css
.bg {
display: inline;
background-color: rgba(115, 251, 4, 0.685);
}
When i inspected the div in browser:
<div class="Layout_bg__1bzIA">Here first div</div>
everything seems to work fine, But when i created another component second.js with a div in it and applied the same class
import React from "react";
import classes from "../Layout/Layout.module.css";
const second = props => <div className={classes.bg}>Here second div</div>
export default second;
And when i inspected the second div it looks like:
<div class="Layout_bg__1bzIA">Here seond div</div>
They both took the same hash value, So my question is it right what i quoted above
.module enables CSS modules
And if it is , Why it gives the same hash values to different elements in different components
In my understanding module allows you to create same classes name without mixing them together. I mean by it that when you create another module with the same class name (in your case bg) it will have assigned different hash value which means they will have different names and therefore those two classes will never mix together.
Hope that helps.
The reason why I need to insert styles from .ts file into less: I have a website and something like content manager panel where you can set the color of buttons for it.
Of course I can use this css variable in my html templates like:
[style.color]="colorVar"
but maybe there is exist some better solution?
you can use ::ng-deep to penetrate into some component and change the styles.
some-component-selector ::ng-deep selector-inside-of-that-some-component {
//write the sytles here
}
I'm using the following instance of a react component in a view:
<Jumbotron>
Lot's of important content
</Jumbotron>
I want an individual style (i.e. a different background image for this instance. So this doesn't work:
<Jumbotron className="individual">
Lot's of important content
</Jumbotron>
Wrapping the instance in a div also doesn't work. How can I do this with simple markup and CSS so that I can simply style the individual class in CSS? AFAIK properties won't help to customize instances...
You can either pass in the style attribute or you can pass through the className attribute in the same way
<Jumbotron className="background--black">
And have your component like this -
const Jumbotron = ({className}) => {
<div className={className}>
Here is the jumbotron
</div>
}
export default Jumbotron
And import a css file that has that class in, if you're using className. But I would probably recommend just using style attribute if it's a one off.