javascript—如何将一个道具从父样式组件传递到其子样式组件，无论其深度如何

lndjwyie 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(399)

我有这些样式化的组件：

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%)" };
  }
`

我有一个叫做 TodoList 用一个 theme 传递到样式化组件的道具如下：

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

我该怎么称呼这个名字 theme 道具一次只能使用一次 Container 元素，使所有子元素（如clearlist、NaviItems和footer）都可以访问它，而无需显式地传递它们
非常感谢。

JavaScript reactjs css react-props styled-components

来源：https://stackoverflow.com/questions/68346326/how-do-i-pass-a-prop-from-a-parent-styled-component-to-its-childrens-styled-com

1条答案

按热度按时间

4nkexdtk1#

您可以使用eProvider解决此问题
访问此链接https://styled-components.com/docs/advanced
例子

// Define our button, but with the use of props.theme this time
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;
`;

// Define our `fg` and `bg` on the theme
const theme = {
  fg: "palevioletred",
  bg: "white"
};

// This theme swaps `fg` and `bg`
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>
);

赞(0）回复(0）举报 2021-09-13

我来回答

javascript—如何将一个道具从父样式组件传递到其子样式组件，无论其深度如何

1条答案

相关问题

热门标签

最新问答