I Have the following scenario:
This should be a reusable component to be imported in different parts of the app
import React from 'react';
import styled from 'styled-components';
const Wrapper = styled.div`
// some basic styling here
`
const DisplayInfo = styled.div`
//more styling
`
const Component = props => (
<Wrapper>
<DisplayInfo>{props.title}</DisplayInfo>
</Wrapper>
export default Component;
);
That component will be imported in another component and some of it's styling should be overwritten
....
import Component from './Component';
const NewWrapper = styled.div`
//here I should select the ${Component} and overwrite some of it's css
`;
const ParentComponent = props => ({
<NewWrapper>
<Component title={props.title} />
</NewWrapper>
})
My issue that is I tried a lot of tactics to target the imported 'Component' inside the NewWrapper styling, but nothing works. Only If I declare 'Component' inside the second file does it works.
Isn't there another way because I want them to be separated?
P.S: Also tried to pass 'classname' to the Wrapper in the first file as it says in the styled-components doc, but it still didn't seem to work.
You're quite close actually. When you're targeting another Styled Component inside a Styled Component, like this:
const StyledParent = styled.div`
${StyledChild} {
...styles
}
`;
The parent expects to receive a Styled Component, not a React component. Change your export in the first file, and try this:
export default styled(Component);
Hello I'm using React to build a website and I want to use .CSS files for my CSS and I'm using import './example.css' in my component file.
Example:
import React from 'react';
import 'Home.css';
const Home = () => {
return (
<div className="example">
Hi
</div>
)
}
and if i create another page but don't import this CSS file, I get the styles on my other page
other page:
import React from 'react';
const About= () => {
return (
<div className="example">
Hi
</div>
)
}
Any reason and solution for this?
When importing a css file like you've done it will be injected into the project and not just into the component you're importing it from.
What you're looking for is css-modules (adding css-modules using create-react-app)
import React from 'react';
import styles from 'Home.css';
const Home = () => {
return (
<div className={styles.example}>
Hi
</div>
)
}
The reason is that you are using the same class in both of your components.
Doing import 'Home.css' does not encapsulate .css only for that component, all of the .css gets bundled together so it ends up overwriting styles somewhere down the line.
For each of the components, you can specify a unique className on top of your component, and use that class to style only that component.
.home-container .header { ... }
You can also make one global .css part to put styles that you want to keep using throughout the whole app.
I'm using material-ui-next and have customized the theme to use my color styles and a custom font. eg. Typography subheading
I'm now attempting to render a component to string for use in a google maps info window. The default material-ui theme is available in the callback styles object passed to withStyles, but none of my customizations are available on the theme argument in the styles callback nor are they applied. The rendered string renders otherwise correctly (albeit w/o events which I sorta expected).
More concisely, when rendering normally, customizations apply. When rendering to string, they do not.
A simple example would be a component that runs withStyles correctly, but return the div instead of the target component ala:
let output = ReactDOMServer.renderToString(component);
return <div dangerouslySetInnerHTML={{__html: output}} />
Any tips how I can get my theme customizations to be passed into the withStyles callback theme argument?
The solution was to make a parent component that renders the target component as a child of the ThemeProvider. There are still no event handlers (as expected), but the theme customizations apply.
Here's the solution:
MyThemeProvider.js (component can also easily be reused for SSR)
export default function MyThemeProvider({children}) {
const muiTheme = createMuiTheme({
typography: {
fontFamily: '"Bryant", "Helvetica", "Arial", sans-serif',
},
palette: {
primary: customBluePalette,
},
// ...
});
return (<MuiThemeProvider theme={muiTheme}>{ children }</MuiThemeProvider>);
}
MapInfoWindowContent.js (here, this only really exists to wrap VenueRenderer with our theme provider)
import MyThemeProvider from '../MyThemeProvider';
import VenueRenderer from '../VenueRenderer';
export default function MapInfoWindowContent({resource}) {
return (<MyThemeProvider><VenueRenderer resource={resource} /></MyThemeProvider>);
}
VenueRenderer (the styled class - can be used independently of MapInfoWindowContent too)
const styles = (theme) => {
// theme.palette.primary['500'] comes from customBluePalette so the injection worked.
}
// ...
export default withStyles(styles, { withTheme: true })(VenueRenderer);
In some other component that needs the HTML str
import ReactDOMServer from 'react-dom/server'
import MapInfoWindowContent from '../MapInfoWindowContent';
let infoWindowComponent = (<MapInfoWindowContent resource={ ... }/>);
let output = ReactDOMServer.renderToString(infoWindowComponent);
// output will have correctly injected classNames that contain customizations
I have default css file and separate css file that should be applied (to owerride default) only when certain conditions are met.
I am using create-react-app wit default import 'file.css' syntax.
What is the best way forward to decide whether to load or not load particular css file dynamically?
The require method only worked in development (as all the CSS is bundled upon build), and the import method did not work at all (using CRA version 3.3).
In our case, we have multiple themes, which cannot be bundled - so we solved this using React.lazy and React.Suspense.
We have the ThemeSelector, which loads the correct css conditionally.
import React from 'react';
/**
* The theme components only imports it's theme CSS-file. These components are lazy
* loaded, to enable "code splitting" (in order to avoid the themes being bundled together)
*/
const Theme1 = React.lazy(() => import('./Theme1'));
const Theme2 = React.lazy(() => import('./Theme2'));
const ThemeSelector: React.FC = ({ children }) => (
<>
{/* Conditionally render theme, based on the current client context */}
<React.Suspense fallback={() => null}>
{shouldRenderTheme1 && <Theme1 />}
{shouldRenderTheme2 && <Theme2 />}
</React.Suspense>
{/* Render children immediately! */}
{children}
</>
);
export default ThemeSelector;
The Theme component's only job, is to import the correct css file:
import * as React from 'react';
// 👇 Only important line - as this component should be lazy-loaded,
// to enable code - splitting for this CSS.
import 'theme1.css';
const Theme1: React.FC = () => <></>;
export default Theme1;
The ThemeSelector should wrap the App component, in the src/index.tsx:
import React from 'react';
import ReactDOM from 'react-dom';
import ThemeSelector from 'themes/ThemeSelector';
ReactDOM.render(
<ThemeSelector>
<App />
</ThemeSelector>,
document.getElementById('root')
);
As I understand, this forces each Theme to be split into separate bundles (effectively also splitting CSS).
As mentioned in the comments, this solution does not present an easy way of switching themes runtime. This solution focuses on splitting themes into separate bundles.
If you already got themes split into separate CSS files, and you want to swap themes runtime, you might want to look at a solution using ReactHelmet (illustrated by #Alexander Ladonin's answer below)
You can use require('file.css') syntax instead. This will allow you to put it inside of a conditional.
e.g.
if(someCondition) {
require('file.css');
}
Use React Helmet. It adds links, meta tags etc into document header dynamically.
Add it into any render method.
import {Component} from 'react';
import ReactHelmet from 'react-helmet';
class Example extends Component{
render(
<ReactHelmet link={
[{"rel": "stylesheet", type:"text/css", "href": "/style.css"}]
}/>);
}
}
You can rewrite it on next <ReactHelmet/> rendering.
One simple solution that I found that works in production is to use vercel's styled-jsx. First, install styled-jsx:
npm install --save styled-jsx
Or if you use Yarn:
yarn add styled-jsx
Now create strings from your css file, so for instance:
const style1 = `
div {
display: flex;
flex-direction: column;
align-items: center;
}
`
const style2 = `
div {
display: flex;
flex-direction: column;
align-items: center;
}
`
And then in your React Component, you can do something like this:
const MyComponent = () => {
return (
<div className='my-component'>
<style jsx>
{
conditionA ? style1: style2
}
</style>
</div>
)
}
Simply add <style jsx>{your_css_string}</style> to the component which you wish to add styling to and you can then to implement conditions just use different strings to import different css styling.
If you are here you most likely are trying to condition a CSS or SCSS import, probably to make some light/dark mode theme or something. The accepted answer works just on mount, after the second css is loaded they are both loaded and you dont have a way to unload them, or actually you have, keep reading...
The use of React lazy and suspense is awesome but in this case we need to help our selves from webpack, because is actually the guy that bundles stuff and can also unbundle stuff, which is what you need, a toggle of css imports basically
Adding webpack lazyStyleTag
Go to your webpack config file and add the following rules
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
// Probly you already have this rule, add this line
exclude: /\.lazy\.css$/i,
use: ["style-loader", "css-loader"],
},
// And add this rule
{
test: /\.lazy\.css$/i,
use: [
{ loader: "style-loader", options: { injectType: "lazyStyleTag" } },
"css-loader",
],
},
],
},
};
Now take your CSS files and change their name to the lazy named convention
You probably have this
styles.css
// or
styles.min.css
Now will be this:
styles.lazy.css
Then create your React theme Provider in a simple React context, this context will wrap your App so it will load the conditioned CSS everytime the context state changes. This context state is going to be availabe anywhere inside your app as well as the setter via a custom hook we will export from the same file, check this out:
import React, {
useEffect, createContext, useState, useContext,
} from 'react';
import { Nullable } from 'types';
// Import both files here like this:
// Import of CSS file number 1
import LightMode from './theme/styles.lazy.css';
// Import of CSS file number 2
import DarkMode from './theme/styles.lazy.css';
interface IContext {
theme: Nullable<string>
toggleTheme: () => void
}
const Context = createContext<IContext>({
theme: null,
toggleTheme: () => { },
});
// Your Provider component that returns the Context.Provider
// Let's also play with the sessionStorage, so this state doesn't
// brake with browser refresh or logouts
const ThemeProvider: React.FC = ({ children }) => {
// Im initialazing here the state with any existing value in the
//sessionStorage, or not...
const [theme, setTheme] = useState<Nullable<string>>(sessionStorage.getItem('themeMode') || 'dark');
// this setter Fn we can pass down to anywhere
const toggleTheme = () => {
const newThemeValue = theme === 'dark' ? 'light' : 'dark';
setTheme(newThemeValue);
sessionStorage.setItem('themeMode', newThemeValue);
};
// Now the magic, this lazy css files you can use or unuse
// This is exactly what you need, import the CSS but also unimport
// the one you had imported before. An actual toggle of import in a
// dynamic way.. brought to you by webpack
useEffect(() => {
if (theme === 'light') {
DarkMode.unuse();
LightMode.use();
} else if (theme == 'dark') {
LightMode.unuse();
DarkMode.use();
}
}, [theme]);
return (
<Context.Provider value={{ theme, toggleTheme }}>
{children}
</Context.Provider>
);
};
export default ThemeProvider;
// This useTheme hook will give you the context anywhere to set the state of // theme and this will toggle the styles imported
export const useTheme = () => useContext(Context);
Remember to put this state on the sessionStorage like in this example so your user has the state available every time it comes back or refreshes the page
Don't forget to wrap the friking App with the Provider:
import ThemeProvider from './ThemeProvider'
const App = () => {
return (
<ThemeProvider>
<App />
</ThemeProvider>
)
}
Now just toggle the CSS imports of your application using your cool useTheme hook
import { useTheme } from './yourContextFile';
// inside your component
const AnyComponentDownTheTree = () => {
const { theme, toggleTheme } = useTheme()
// use the toggleTheme function to toggle and the theme actual value
// for your components, you might need disable something or set active a
// switch, etc, etc
}
Other solution does not work for me. After one day of the search, I obtain bellow solution. In my issue, I have two CSS files for RTL or LTR like app.rtl.css or app.ltr.css
Create a functional component Style like this:
import React, { useState } from "react";
export default function Style(props) {
const [stylePath, setStylePath] = useState(props.path);
return (
<div>
<link rel="stylesheet" type="text/css" href={stylePath} />
</div>
);
}
And then you can call it, for example in App.js:
function App() {
...
return (
<Style path={`/css/app.${direction}.css`} />
)}
direction param contains rtl or ltr and determine which file should be loaded.
I tested some alternatives available in some tutorials and the best for me was to use only classes in css.
One of the problems I encountered when using
require: did not override on some occasions
import: delay generated to load css
The best way for me was to actually put a class switch
.default-sidebar {
--side-text-icon:rgba(255,255,255,.9) !important;
--side-text-section: rgb(255,255,255,.8) !important;
--side-separator-section:#ff944d !important;
}
.dark-sidebar {
--side-text-icon:rgba(255,255,255,.9) !important;
--side-text-section: rgb(255,255,255,.8) !important;
--side-separator-section:#262626 !important;
}
'
<div className={`root-sidebar ${condition?'default-sidebar':'dark-sidebar'}`}></div>
I'm using facebook's create-react app for my application:
In my Login.js container, I am importing CSS like so:
import React from 'react';
import '../../styles/users/Login.css'
const Login = () => {
....
The problem is the Login.css styles are being applied to my entire application... for example, if Login.css has:
body {
background:Red ;
}
The entire app would have a body of background: Red; Even outside of the Login container.
What I expected/want is for a CSS import within a container to only apply to that particular container.
Is that possible w React? How are react developers supposed to handle container specific stylings? Do I need to add an ID to all containers and include that in the entire CSS file?
1. Solution: Give your DOM elements class names to use them in your css.
JS:
// in Link.js
import React from 'react';
import '../../styles/Link.css'
const Link = ({children, href}) => (
<a className="link" href={href}>{children}</a>
);
CSS:
// Link.css
.link {
color: red;
}
2. Solution: Inline styles.
JS:
// in Link.js
import React from 'react';
import '../../styles/Link.css'
const Link = ({children, href}) => (
<a style={color: 'red'} href={href}>{children}</a>
);
3. Solution: CSS in JS.
There are some libraries that try to solve the styling issue:
Watch this talk: https://speakerdeck.com/vjeux/react-css-in-js
And have a look at this: https://github.com/cssinjs
styled-components: https://github.com/styled-components/styled-components
The best and easiest solution is to give classNames to every element you have in your code. I had the same issue when trying to apply widths and heights to my images and eventually found out that it was affecting whole app.