What is the best way to efficiently pass a prop from a Parent styled component to its children's styled components, regardless of how deeply nested they are?

Question

What is the best way to efficiently pass a prop from a Parent styled component to its children's styled components, regardless of how deeply nested they are?

I am utilizing these customized components:

import styled, { css } from 'styled-components'

const Container = styled.div`
  background-color: ${props => props.theme === "light" ? "hsl(0, 0%, 98%)" : "hsl(235, 24%, 19%)" };
  border-radius: 4px;
  box-shadow: ${props => props.theme === "light" ? "0px 35px 50px -15px rgba(194, 195, 214, 0.5)" : "0px 35px 50px -15px rgba(0, 0, 0, 0.5)" };
`

const Footer = styled.footer`
  padding: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: ${props => props.theme === "light" ? "hsl(236, 9%, 61%)" : "hsl(234, 11%, 52%)" };
  font-size: 14px;
`

const Nav = styled.nav`
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: inherit;
`

const NavItem = styled.a`
  cursor: pointer;
  display: inline-block;
  color: inherit;

  &:hover {
    color: ${props => props.theme === "light" ? "hsl(235, 19%, 35%)" : "hsl(236, 33%, 92%)" };
  }

  &:not(:last-of-type) {
    margin-right: 15px;
  }

  ${({ active }) =>
    active &&
    css`
      color: hsl(220, 98%, 61%);
    `
  }
`

const ClearList = styled.p`
  color: inherit;
  cursor: pointer;

  &:hover {
    color: ${props => props.theme === "light" ? "hsl(235, 19%, 35%)" : "hsl(234, 39%, 85%)" };
  }
`

In addition, I have this component labeled TodoList with a theme property that is passed to the styled components in this manner:

const TodoList = ({ theme }) => {
  return (
    <Container theme={theme}>
      <Footer theme={theme}>
        <p>5 items left</p>
        <Nav>
          <NavItem theme={theme}>All</NavItem>
          <NavItem theme={theme}>Active</NavItem>
          <NavItem theme={theme}>Completed</NavItem>
        </Nav>
        <ClearList theme={theme}>Clear Completed</ClearList>
      </Footer>
    </Container>
  )
}

export default TodoList

Is there a way for me to pass the theme property only once in the Container element and have it accessible to all nested elements such as Clearlist, NavItems, and Footer without explicitly passing them?

Many thanks

javascript css reactjs styled-components react-props

Answer 1

Answer №1

To resolve this issue, consider implementing ThemeProvider in your solution

For more information, please check out the following link https://styled-components.com/docs/advanced

Here is an example:

// Customizing button styles using props.theme
const Button = styled.button`
  color: ${props => props.theme.fg};
  border: 2px solid ${props => props.theme.fg};
  background: ${props => props.theme.bg};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
`;

// Setting `fg` and `bg` properties on the theme object
const theme = {
  fg: "palevioletred",
  bg: "white"
};

// Creating a new theme by swapping `fg` and `bg` colors
const invertTheme = ({ fg, bg }) => ({
  fg: bg,
  bg: fg
});

render(
  <ThemeProvider theme={theme}>
    <div>
      <Button>Default Theme</Button>

      <ThemeProvider theme={invertTheme}>
        <Button>Inverted Theme</Button>
      </ThemeProvider>
    </div>
  </ThemeProvider>
);

Answer 2

To resolve this issue, consider implementing ThemeProvider in your solution

For more information, please check out the following link https://styled-components.com/docs/advanced

Here is an example:

// Customizing button styles using props.theme
const Button = styled.button`
  color: ${props => props.theme.fg};
  border: 2px solid ${props => props.theme.fg};
  background: ${props => props.theme.bg};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
`;

// Setting `fg` and `bg` properties on the theme object
const theme = {
  fg: "palevioletred",
  bg: "white"
};

// Creating a new theme by swapping `fg` and `bg` colors
const invertTheme = ({ fg, bg }) => ({
  fg: bg,
  bg: fg
});

render(
  <ThemeProvider theme={theme}>
    <div>
      <Button>Default Theme</Button>

      <ThemeProvider theme={invertTheme}>
        <Button>Inverted Theme</Button>
      </ThemeProvider>
    </div>
  </ThemeProvider>
);

What is the best way to efficiently pass a prop from a Parent styled component to its children's styled components, regardless of how deeply nested they are?

Answer №1

Similar questions

``Inconvenience of Extensive URLs Being Displayed in Tables

Combining Multiple Arrays into a Single Array

Tips on incorporating variable tension feature into D3 hierarchical edge bundling

Displaying a secondary table within the Material-table detail panel

Javascript: Anticipating a Return from an Argument

React - “Error: localStorage is undefined” displayed

When the page is scrolled to 50 pixels, a modal pop-up will appear

Encountering Excessive Open Files Error with NextJS Deployment

Exploring the combination of Material-UI's Box Component and Drawer Component for enhanced user interface

Why is the toggle functioning properly?

unable to perform a specific binary operation

jQuery is great at adding a class, but struggles to remove it

The LoopBack framework encountered an issue where it could not execute the 'post' method due to being undefined

Is there a way to remove a row through fetch using onclick in reactjs?

Uncaught TypeError: Cannot read property 'e' of undefined in vue.js

Conceal elements when they are too small without the use of JavaScript

Learn the process of integrating VueJS with RequireJS

Content below divs that are fixed and absolutely positioned

Caught up: TypeScript not catching errors inside Promises

Using AngularJS to handle form data without ng-model