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")
);
Related
import React from 'react';
import { SketchPicker } from 'react-color';
<SketchPicker color={this.props.color} onChange={this.handleChange} />
I want to add a class in the input element directly.
I'm not completely sure what you are asking but it seems that you want to add CSS styling directly to the internal input of the react component. The quickest way to do this (although not the cleanest) is to override the css.
You can add styles directly to the id of the input:
#rc-editiable-input-61 {
...css rules here
}
Or you could use css combinators:
.name_of_unique_parent_class input {
...css rules here
}
There is not enough information in your screenshot to give you a detailed explanation, but there are many online resources on combinators and css overloading.
Combinators
Overriding CSS
I am having a problem with CSS imports in React, I have a page Home that imports Home.css and a page Hero that imports Hero.css appearently in every page of the application the Hero.css is being applied without even declaring it how can I fix this? These are the following components:
App:
import './App.css';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from './pages/home/Home';
import Hero from './pages/hero/Hero';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />}></Route>
<Route path="/hero" element={<Hero />} ></Route>
</Routes>
</Router>
);
}
export default App;
Hero:
import './Hero.css';
function Hero() {
return <div>
<h1>Hero!</h1>
<button className='glow-on-hover' disabled>test 1</button>
<button className='small-button glow-on-hover'>test 2</button>
<button className='small-button glow-on-hover'>test 3</button>
</div>;
}
export default Hero;
Hero.css:
div {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-items: center;
background-color: #002bff;
}
Home:
import './Home.css';
function Home() {
return <div>
<p>Home!</p>
</div>;
}
export default Home;
The div in the Home component is blue even though the Home.module.css is empty and I declared that the div must be blue only in the Hero.module.css how can I fix this?
First, it's important to understand that importing CSS into a JS page is not actually a feature that JavaScript has. It's an instruction to a bundler like Webpack to include this CSS in the build process.
Moreover, CSS has no native means of scoping it's effects to a cetain component. It's your responsibility to apply the scoping via a class etc.
For example:
React
return <div className="component-hero">
...
CSS
.component-hero {
...
}
Edit:
While the information above is indeed the nature of CSS, there are apparently available tools for automating the scoping with unique identifiers. See references in other answers.
Since there is no built-in scoping mechanism to limit CSS Rules to specific components, This behavior is completely normal, Which results in all your div elements in the component tree to be effected by this import.
I would recommend using CSS Classes to have a layer of scope at least semantically.
<div className="hero-container">
// nested jsx...
</div>
And then add CSS rules in your hero.css file:
.hero-container {
// css-rules
}
create-react-app toolchain has a concept called CSS Modules, If you happen to be using this toolchain, checkout official documentation of CSS Modules here.
Since all our CSS is bundled into a single index.css file at the end of the day, It's harder to maintain distinct class names in larger projects. So, it's better to use a more elegant solution like CSS Modules or third-party libraries that style our components in a tightly coupled fashion, like styled-components etc.
That because you apply the CSS as global.when you are importing in css like import './Home.css';.So it is apply as global. If you need to apply CSS styles as scope to component, you can use different options as below.
One option.
you can use module.css file. According to the official repo.“CSS files in which all class names and animation names are scoped locally by default”.In here you are you can declare styles using classes. but this is not supported to css id.so always to remember declare classes inside the module.css file.
let's deeper in to this.
let say I have declare home.module.css file as this.
.home{
background:green
}
then you cam import this to your jsx file as below and apply this class as below.
import homeStyles from './home.module.css';
export const Home= () => {
return (
<section className={homeStyles.home}>
module.css example
</section>
);
};
when looking at the code you can get idea that I have declared variable by this line," import homeStyles from './home.module.css';".and I am accessing that class inside the section div using homeStyles.home.That because homeStyles is a object that contain the home class property.
Second Option
You can use Styled components. See official doc.This is a third party library. but has much resources to adding and modifying the styles. if you are use, Maetrial ui V5 It also used the this styled component styling pattern.(Just check material ui v5 Styled hook).This styling pattern is not used in the previous material ui versions. The One important this is we can use css classes and css ids for styles the our react elements.
Let say we need to style div with class home which has css propety to background green. we can style this as below.
import styled from "styled-components";
const sectionWrapper = styled.div`
.home {
background: green;
}
#media screen and (max-width: 600px) {
.home {
background: red;
}
}
`;
export const Home = () => {
return (
<sectionWrapper>
<div className="home">module.css example</div>
</sectionWrapper>
);
};
As in the module.css file, we can use media queries in the styled component as well. I have add a media query in the example as well. It explain s that screen size less than 600px,that home class div make background red. You can get better idea about this from their official site. see
Visit Next.js and notice the page request in the network tab. Preview shows not just the HTML but completely pre-styled page.
When we use Styled-Components and Material-UI they have exposed ServerStyleSheet which is used for serving the required styles for the first render within the HTML.
import { ServerStyleSheet } from 'styled-components'
import { ServerStyleSheets } from '#material-ui/core/styles'
How can we achieve same output when using react-bootstrap or custom css like test.css?
Do you care if its a test.css or React bootstrap - Instead why not just inline all critical stylesheets?
It might be worth trying out their experimental feature
Add experimental: { optimizeCss: true } to next.config.js
Install critters#0.0.7 as a dependency
Via How to inline CSS in the head tag of a NextJS project?
Add your style file on the the _app file, you can create this file inside the pages directory in nextjs
import { AppProps } from "next/app";
import 'bootstrap/dist/css/bootstrap.min.css';
import "../your_style.css";
function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
export default App;
for react-bootstrap , you need to add npm i react-bootstrap bootstrap
Nextjs allows you to display SSG/SSR pages and javascript-disabled
users will still be able to see your app but the layout will be messy
if you use react-bootstrap components to build your layout.
To use react-bootstrap at SSR:
Install :
npm i react-bootstrap bootstrap
Import bootstrap styles in your _app.js:
import 'bootstrap/dist/css/bootstrap.min.css';
You can then use your react-bootstrap components as you would do in reactjs:
import {Container, Row, Col} from 'react-bootstrap';
const Layout = () => (
<>
<Container fluid>
<Row>
<Col>
<p>Running on Next.js at SSR</p>
</Col>
</Row>
</Container>
</>
);
export default Layout;
use Tailwind css
https://tailwindcss.com/
We can simply use classes and it make everything super easy for you design
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>
When developing my project, I look at others for an example. When I looking at Instagram website. I see the class name of html is change when user is login. May I know how to achieve that actually? As what I know, react only live in one of the div in html structure.
// This code will render a component in the html root.
ReactDOM.render(<App />, document.getElementById('root'));
// But how to serve a whole new html file in react
How to serve a whole new html file in react? Is it violate the concept of react?
HTML and Document body are outside the React realm of DOM handling. So you can use good old querySelector for setting the class names.
function LoginPage() {
useEffect(() => {
document.querySelector('html').classList.add('login-page');
}, []);
return (
// stuff
);
}
A handy package is the React ecosystem for these is React Helmet
import {Helmet} from "react-helmet";
function LoginPage() {
return (
<Helmet>
<html className="loginPage" {...anyOtherStuff} />
<body {...attributesOnBody} />
</Helmet>
);
}
If you would like to add nodes that are adjacent to the root node in the body or React provides you with a solution called Portals that can render anywhere.
For the abiity to change index.html itself, you would not be building yourself a SPA anymore which seems to be case to use React.
you should add a class to your html input to retrieve it.
Here is an exemple :
import React from 'react';
import ReactDOM from 'react-dom';
class X extends React.Component {
render() {
return <h2>TEXT HERE</h2>;
}
}
ReactDOM.render(<X/>, document.getElementById('root'));
React works in a way that attaches itself to some DOM element. In your case, you are attaching it to some element with id of root.
TLDR;
Your index.html will contain the code of your application inside the element with root id during the runtime in the browser. You can see it by inspecting it using browser developer tools.
Your <App /> is the root of your application and if you use dev tools of your browser and you inspect the DOM tree you will see components in there. They are just dynamically attached by React (ReactDOM) and React is in the control of when and how things are rendered.
If your components look something like:
import React from 'react';
function App() {
return <h1 className="title">Hello!</h1>;
}
In Dev tools your DOM structure will looks something like this:
<div id="root">
<h1 class="title">Hello!</h1>
</div>
Here you can see that you have element with root id that you attached your <App /> before and you can see the content of <App />, <h1 class="title" /> together with classes.
That is also how Instagram works and most of the single-page applications or SPAs in short.
There is also a possibility to render static version of your application.