I have GlobalStyle with some overwrites like:
const GlobalStyle = createGlobalStyle`
h6 {
font-weight: ${props => (props.semibold ? 600 : "bold")};
font-size: 16px;
}
...
`;
I would like to pass props from my components to GlobalStyle for eg. weight. Something like this (from JSX):
const LocalComponent = () => {
return (
<div>
<h6 semibold>This should be semi-bold text</h6>
</div>
);
};
above example doesn't work ofc. But is there a way to achieve this?
Currently I'm wrapping h6 into another SC, and adding font-weight locally. It would be much better to have it on global scale without need to create another component just as a wrapper for bold text etc.
Based on the above information, it isn't clear what part is missing.
I am presuming you have added the <ThemeProvider theme={your_theme} /> as a wrapper around your application (e.g. <App />) This will inject props into all of your styled-components if they are children of <App />.
<ThemeProvider theme={your_theme}>
<GlobalStyle />
<App />
</ThemeProvider>
Don't forget to add your <GlobalStyle /> component as a child to the ThemeProvider, or the props will not populate.
Related
I have a React component utilizing Material-UI called 'Profile', with custom CSS to create responsive font sizing like such:
let theme = createMuiTheme();
theme = responsiveFontSizes(theme);
theme.typography.h1 = {
fontSize: '5.35rem',
'#media (min-width: 600px)':{
fontSize: '3.0rem',
},
'#media (max-width: 600px)':{
fontSize: '2.2rem'
},
[theme.breakpoints.up('md')]:{
fontSize: '5.35rem'
}
}
The first few lines of the return are:
export default function Profile () {
return (
<div>
<ThemeProvider theme={theme}>
<Grid container direction="row">
<Grid item className="profile">
When I include this component in my index.js file, it renders perfectly. However, once I add a new component called 'PublicWorks.js' as such:
<React.StrictMode>
<Header />
<Profile />
<PublicWorks />
</React.StrictMode>,
the responsive styling no longer works. The code for PublicWorks is very simple, essentially just this (with appropriate closing brackets):
import React from 'react';
import {Grid, Typography, Accordion, AccordionSummary, AccordionDetails, ThemeProvider} from '#material-ui/core';
import ExpandMoreIcon from '#material-ui/icons/ExpandMore';
export default function PublicWorks () {
return (
<div>
<Accordion>
<AccordionSummary expandIcon={<ExpandMoreIcon />} >
<Typography>Project 1</Typography>
</AccordionSummary>
<AccordionDetails>
Is this overriding caused by the nature of MuiTheme operating at more of a global scale, or am I doing something else incorrectly? Should I be trying something like:
<React.StrictMode>
<ThemeProvide theme={theme}>
<Header />
<Profile />
<PublicWorks />
</ThemeProvide>
</React.StrictMode>,
in order to implement this correctly?
I think the problem you are having may be correlated with this issue.
Regardless, in general you would need to use the ThemeProvider as parent of your components since it uses React Context
This component takes a theme property, and makes it available down the
React tree thanks to the context. It should preferably be used at the
root of your component tree.
Docs: https://material-ui.com/styles/api/#themeprovider
Regarding your comment And if I just want it in Profile?
You can use other solutions such as makeStyles for this if you opt to style that component separately
I have a component with its own styles:
import styles from './componentA.module.scss';
componentA.module.scss:
.A { color: green;
background: white;
font-size: 1rem;}
ComponentA.js
....
return(
<div className={styles.A}>{props.children}</div>
)
I have a ComponentB.js. In this component B I need the component A, but I need to overwrite the style color.
ComponentB.js
...
import ComponentA from './../componentA';
import styles from 'componentB.module.scss';
...
return(
<ComponentA />
)
but I want in the component B overwrite the color to the class .A. I tried in componentB.module.scss to do it and it doesn't change.
componentB.module.scss
.A {
color: red !important;
}
and it doesn't work I want to be able to overwrite the styles depending on the component that is wrapped. How can I do it? Thanks.
You have to pass Component A styles by the props and then apply to the wrapper div
const ComponentA = (props) => {
return(
<div className={styles.A} styles={props.cssStyles}>{props.children}</div>
)
}
And then
import ComponentA from './../componentA';
import styles from 'componentB.module.scss';
...
return(
<ComponentA cssStyles={{color: "red"}} />
)
You can also pass classnames as props and then merge default classnames and props classnames by this package https://www.npmjs.com/package/classnames
i was scratching my head from the last 2 hours that why this 3 rd party styled component is not adding i it .have a look
import React from 'react';
import styled from 'styled-components'
const StyleDiv =styled.div`
#media(max-width:600px){
body{
background-color: red;
}
}`
const Person= (props)=>{
return <StyleDiv>
<h1 onClick={props.click}>i am {props.name} and {props.age} years old as you know me as {props.children} </h1>
<input type="text" onChange={props.changed} />
</StyleDiv>
}
export default Person;
If you put selectors within the template string without the ampersand, they will refer to children of the component. https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting
Basically you can't select body within your div and you probably shouldn't.
you cannot apply global styles like this to a component, for applying global styles (i.e. styles to body, html etc.) styled-components gives a createGlobalStyles utility, it can be used like this:
import { createGlobalStyles } from 'styled-components';
const GlobalStyles = createGlobalStyle`
#media (max-width: 600px) {
body {
background-color: red;
}
}
`;
// Render GlobalStyles to the root lvvel of your app
ReactDOM.render(
<>
<GlobalStyles />
<App />
</>,
document.getElementById('root');
);
Hope it helps :)
I would like to pass a custom prop (exactly: theme name as string) to each passed styled component through Provider, so it was available throughout the css definition.
ThemeProvider almost does it, but it expects object, not the string. I do not want to pass whole object with theme settings, just the name of my theme.
I do not want to use special theme prop or similar, because then I would have to it manually every single time I create new styled component. Provider seems like the best option if only it cooperated with string.
Is there any possibility to pass a string through Provider to Consumer builded in styled components?
EDIT:
[PARTIAL SOLUTION]
I found what I was looking for when I realized styled-components exports their inner context. That was it. Having access to pure react context gives you original Provider, without any 'only objects' restriction ('only objects' is a styled-components custom provider restriction).
Now I can push to each styled component exactly what I want and if I want.
import styled, { ThemeContext } from 'styled-components';
const StyledComponent = styled.div`
color: ${props => props.theme == 'dark' ? 'white' : 'black'};
`;
const Component = props => {
const theme = 'dark';
return (
<ThemeContext.Provider value={theme}>
<NextLevelComponent>
<StyledComponent />
</NextLevelComponent>
</ThemeContext.Provider>
);
};
Hope I have this correct, from what I've been able to glean. I haven't tried this out but it seems it might work for you. This is lifted directly from the reactjs.org docs regarding context. It passed the string name of the theme down.
const ThemeContext = React.createContext('green');
class App extends React.Component {
render() {
return (
<ThemeContext.Provider value="blue">
<SomeComponent />
</ThemeContext.Provider>
);
}
}
function SomeComponent(props) {
return (
<div>
<OtherComponent />
</div>
);
}
class OtherComponent extends React.Component {
static contextType = ThemeContext;
render() {
return <ThirdComponent theme={this.context} />
}
}
I hope this helps you understand the idea behind ThemeContext from styled-components. I've passed string "blue" to ThemeContext just to show, that it should not be object and you can use just string.
import React, { useContext } from "react";
import ReactDOM from "react-dom";
import styled, { ThemeContext } from "styled-components";
// Define styled button
const Button = styled.button`
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border-radius: 3px;
color: ${props => props.theme};
border: 2px solid ${props => props.theme};
`;
// Define the name of the theme / color (string)
const themeName = "blue";
const ThemedButton = () => {
// Get the name from context
const themeName = useContext(ThemeContext);
return <Button theme={themeName}>Themed color: {themeName}</Button>;
};
function App() {
return (
<div className="App">
<ThemeContext.Provider value={themeName}>
<ThemedButton />
</ThemeContext.Provider>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Demo: https://codesandbox.io/s/styled-components-example-with-themecontext-cso55
I need to add sass variable to styled components in react js ,I have go through this link Sass-extract-js and i have followed their procedure.
but i'm stuck in this line
import styled from 'styled-components';
const Button = styled.button`
background-color: ${p => p.theme.primary} //explain this line
`;
I have created var.scss file and contains
$black:#000000;
$white:#ffffff;
$red:#f64406;
$gray:#333333;
$green:#3bbd47;
In my render
<div>
<div>
<h2>Welcome Back!</h2>
<h3>Login Your Account</h3>
</div>
Styled component
const Content = styled.div`
h1:${}//how i can get variable here
`;
This can be achieved by using theming in the styled-components. You can add variables to ThemeProvider as follows:
const theme = {
black:#000000,
white:#ffffff
red:#f64406
gray:#333333,
green:#3bbd47
}
<ThemeProvider theme={theme} >
<App />
</ThemeProvider>
and then this object can be used in the styled-components
const BlackDiv = styled`
color: ${(props) => props.theme.black}`;
For more info please check theming