CODEWITHSUNDEEP
cssreactjssass
Aiden Faulconer
Aiden Faulconer

Reputation: 422

Styling child components dynamically in react

I am using sass to style my components by importing the compiled css per component, this will not dynamically style or scale well

Context:

I have a main style-sheet for the main app component containing responsive UI classes with media queries and different custom column sizing's. I do not want to repeat these classes per child component of the main component... just to ensure each has access to them... Am I approaching component styling in react the wrong way?

How else would I have my child components inherit css classes? Do I have to pass them down as props? I feel like there is a better way to approach this problem...

How would I maintain global style state when dynamically changing it?

Upvotes: 0

Views: 1872

Answers (2)

Aiden Faulconer
Aiden Faulconer

Reputation: 422

I found a solution that worked for me, as suggested by Basile, I am using the emotion css-in-js library where styles go into styled components. emotion comes with a themeing mechanism to dynamically style css, and maintain global styling.

css-in-js styled components

const MButton = styled.button`
  background-color: ${(props) => props.theme.colors.primarycolor};//using theme
  border: 3px solid $color;
  border-radius: 20px 20px 20px 20px;
  -moz-border-radius: 20px 20px 20px 20px;
  -webkit-border-radius: 20px 20px 20px 20px;
  -ms-border-radius: 20px 20px 20px 20px;
  -o-border-radius: 20px 20px 20px 20px;
`;
export default class index extends Component { ... your component

For global styling and themeing I used emotions theme, themeprovider, and global components. I define my themes in a seperate file, import it, apply 

const makeGlobalStyles = (theme) => css` any additional global styling not dependent on differing themes in theme`; 
//supply styles to global component which manages global theme style state
const GlobalStyles = withTheme(({ theme }) => (
  <Global styles={makeGlobalStyles(theme)} />
));

store theme as a state in apps main component...

this.state = {
      viewState: "DARK",
      theme: theme.DARK,//use a method to change these states to then change the theme styles used across the app

Then provide theme state realtime to all components who utilize it

render(){
const {viewState,theme} = this.state;
return(
<ThemeProvider theme={theme}>
   <GlobalStyles />
     any logic for your application, pass prop theme to components to dynamically style to the theme
     <SomeComponent theme={theme}/>
<ThemeProvider/>
)}

Upvotes: 0

Basile Bong
Basile Bong

Reputation: 74

I am using sass to style my components by importing the compiled css per component

I would not recommend this approach. React is compiled with Webpack. If you use the create-react-app to initialize your new project you can just import any .scss file into your index.js and Webpack will compile it to a .css file and inject it into your HTML on build. If you do it this way you can use any css class anywhere in your React app.

More information here: https://scotch.io/tutorials/using-sass-in-create-react-app-v2

And here: https://create-react-app.dev/docs/adding-a-sass-stylesheet

P.s.: I suggest you create an scss folder in src with one main scss file (e.g. app.scss). In app.scss you @import all your other scss files that can inherit variables and so on. Then import the app.scss into your index.js

Upvotes: 1

Related Questions