i am wondering is there a way to dynamically import a css file into react.
say i have a css file named style-light.css and i have another named style-dark.css.
is there a way to use react state or some other method to dynamically import the css files into the component based on the current value of the state ?
eg
import "../style-light.css" // default import
export default function TestImport(){
const [switch, setSwitch] = useState("light");
if(switch === "dark"){
import "../style-dark.css" // adds the style-dark import below the light one to overwrite the light css.
}
return (
<div>
<button onClick={()=> setSwitch("dark")}> click to get dark css </button>
</div>
)
}
bascially something like that?
any insight will be helpful. thanks
Option 1
For that I would recommend that you use CSS variables and only one CSS file. You can change the values of your variables based on a class applied on your page body. For example:
variables.css
:root {
--textColor: black;
}
[class="dark-theme"] {
--textColor: white;
}
With javascript you can add or remove the class from your html document, like this
component.js
document.documentElement.classList.add('dark-theme')
document.documentElement.classList.remove('dark-theme')
On your components styles you can use the variables with var(--variable)
component.css
.my-component-class {
color: var(--textColor);
}
Option 2
Use some CSS-IN-JS library like styled-components or emotion, you can use a ThemeProvider to change our theme accordingly with some state in your application. See this example here: https://styled-components.com/docs/advanced#theming
Related
I'm making a simple portfolio page and for the same, I have a few icons I want to render for which I have used Material UI icons
Now I added the same custom styling to them and since I'm new to styled-components I did it as follows
const iconsArray = [GitHubIcon, LinkedInIcon, CallIcon];
const styledIcons = iconsArray.map(
(item) => styled(item)`
//other styles
:hover {
cursor: pointer;
}
`
);
the iconsArray above is made from direct imports from Material UI icons
Now I want to render the icons as
{styledIcons.map(styledIcon=>(
<styledIcon>
<a href={correspondingLink}>
</a>
</styledIcon>
)}
This won't work for obvious reasons but I can't access the component even using styledIcon.component like we could for normal react components. Any suggestions on how to achieve this?
I'm using Material UI components and MaterialTable and I want to stylish the components using StyledComponents
But I not been having the desired results when I try to apply styles using StyledComponents
CodeSandBox Online Example
Example:
import styled from 'styled-components'
import MaterialTable from "material-table";
export const MaterialTableStyled = styled(MaterialTable)`
/* STYLE FOR FILTER ROW */
tbody > .MuiTableRow-root:first-child {
background-color: #F1F3F4 !important;
}
`
When I use the MaterialTableStyled component no applied the style.
Instead, if I use a div on my StyledComponent:
import styled from 'styled-components'
export const MaterialTableStyled = styled.div`
/* STYLE FOR FILTER ROW */
tbody > .MuiTableRow-root:first-child {
background-color: #F1F3F4 !important;
}
`
My custom styles work perfecty on that way:
<MaterialTableStyled> // DIV WITH STYLES
<MaterialTable
// ALL PROPS AND STUFFS
/>
</MaterialTableStyled>
...the question is: it's possible "override" or change styles without using the div to change the style?
A component has to pass the className property into their children in order styled function to work.
From a quick look, MaterialTable doesn't do that, as a result styled components can't assign another css class to the table.
Component compatible with styled function
const StyledFriendlyComp = ({className}) => <div className={className}>Styles being applied</div>
Component that won't work with styled function
const StyledFriendlyComp = () => <div>Styles not working</div>
In this cases you need to wrap the component with another element like div.
If you want to style a component directly, you will need to specify a HTML element.
In your case though (if you are only using it to style lower-level components) you could use something like React Context to pass down a prop that the styled-component can consume and utilize to determine the style.
If you explicitly need the prop/value for styled-component usage, you could also use set it as a styled-component transient prop.
I am using react and styled components and use 3rd party component named IntlTelInput.
My code goes like this:
const StyledIntlTelInput = styled(IntlTelInput)`
background: blue;
`;
export default function PhoneNumberInput() {
return (
<StyledIntlTelInput />
);
}
IntlTelInput doesn't support className property, but containerClassName. As a result I get the IntlTelInput without blue background.
How can I solve this?
In trying to keep React code as reusable as possible, I have often passed CSS classes as a property in React components. The use case for this is that these components will function exactly the same but can look different depending on where they are in the page.
Is passing a CSS class as a property in a React component acceptable, or are there better ways of accomplishing the use case above?
Quick, simplified example:
const ToolTipButton = ({ buttonClass, onButtonClick, children }) => (
<button
className={buttonClass}
onClick={onButtonClick}
data-toggle="pages-tooltip"
data-placement="top"
title="Do Something"
>
{children}
</button>
);
<ToolTipButton buttonClass={'ButtonClass1'} onButtonClick={this.doesSomething}/>
<ToolTipButton buttonClass={'ButtonClass2'} onButtonClick={this.doesSomething}>
// Text and other stuff
</ToolTipButton>
Css selectors are chainable, so with just pure css, you can have individual styles based on the container. The button component can have a static class such as tool-tip-button, and have the stylesheet scope it to the containing component. E.g.
.tool-tip-button {
color: black;
}
.component-a .tool-tip-button {
color: green;
}
.component-b .tool-tip-button {
color: red;
}
Note that react components can (and are suggested to) have their own individual stylesheet, e.g. ComponentA.css and ComponentB.css, and simply import them:
// ComponentA.js
import './ComponentA.css'
As long as your class definitions are in scope, passing class names as props is perfectly acceptable. In cases where class definitions are not in scope, the alternative is to pass a style definition object. For example:
const ToolTipButton = ({ style, onButtonClick, children }) => (
<button
style={style}
onClick={onButtonClick}
data-toggle="pages-tooltip"
data-placement="top"
title="Do Something"
>
{children}
</button>
);
<ToolTipButton style={{backgroundColor: 'red'}} onButtonClick={this.doesSomething}/>
Some component libraries (e.g Material UI) allow you to pass both a class name and a style definition object as props. Generally it's better just to use a class name (to avoid defining styles in your js) if possible.
I have a material UI RaisedButton and I want to change the background color.
I have this:
const style = {
backgroundColor: 'green'
};
export default class CreateLinksave extends React.Component {
<RaisedButton
label="Continue"
style={style}/>
}
but when I refresh the page the material-ui style remains, so how can I override the style?
A second question is, how to avoid doing inline styling? I was thinking on create a js file with constants with the styles I need for my components, import it and access to my styles that way, is that a good approach?
I'm new to React so some help would be nice...
Regards.
You can override the style by passing in the attribute. See the docs for which attributes are supported.
creating a JS file (or multiple files) with your styling sound like a good idea, as long as the rules are simple. if you find yourself merging & overriding styles it would be easier just keeping the style in the component file.
You'll end up with something like
import {green} from './my-style/colors';
...
<RaisedButton label="change min" backgroundColor={green} />
If you are using Material UI you should use jss as seen in their documentation. And use the withStyles HOC. Actual link https://material-ui.com/customization/css-in-js/
Here is an example:
import { withStyles } from '#material-ui/core/styles';
const style = {
back: {
background: green,
},
};
class CreateLinksave extends React.Component {
{classes} = this.props;
<RaisedButton
label="Continue"
style={classes.back}/>
}
export default withStyles(styles)(CreateLinksave );
I think you should check the documentation to have better and reusable components.