通过嵌套的样式组件传递道具 [英] Passing props through nested Styled Components

问题描述

以这个简单的情况为例:

我有一个容器，里面嵌套了一个 h1.我想将一些道具传递给这两个元素，它们会根据浅色/深色主题改变它们的颜色；例如:白色文字/黑色背景 ||黑色文字/白色背景

问题:看起来传递给样式组件的道具(颜色和文本)并没有像我假设的那样级联.

简单例子:

导出函数 Heading(props) {返回 (<容器{...道具}>//我希望 props obj 可以通过嵌套的 Heading el 获得<标题>{道具.文本}</标题></容器>)}//样式组件export const Container = styled.div`填充:20px；背景颜色:${props =>props.color === 暗?黑色":白色"；`;export const Heading = styled.h1`背景颜色:${props =>props.color === 暗?白":黑色"；//不影响`;

相反，我必须这样做:

 <容器{...道具}>//传递给容器<标题{...道具}>//传递给标题 el{道具.文本}</标题></容器>

问题:

我可以让 Heading 选取传递给 Container 的 {...props} 而无需两次声明吗?
还是我误解了样式组件的行为方式?

解决方案

所以解决这个问题的最好方法是使用 themes.由于您的容器是一个样式组件，因此它具有内置功能.<​​/p>

所以如果你给它添加一个主题道具，它会将主题级联到每个也是样式组件的孩子:

导出函数 Heading(props) {返回 (<容器主题={{mode: 'light'}}><标题>//这个标题会接收这个主题对象作为道具.{道具.文本}</标题></容器>)}export const Heading = styled.h1`背景色:${({theme}) =>theme.mode === "黑暗";?白":黑色"};`;导出 const ButtonInsideHeading = styled.h1`背景色:${({theme}) =>theme.mode === "光";?黑色":白色"};`;

您在评论中提到的那个按钮也是如此.Styled-components 将注入这个主题道具，不管它们有多少层深.因此，您的 Button 样式组件将从 Heading 继承 theme，后者从 Container 继承它.它可能有点冗长，但不一定很乱.

您还可以使用 Kent C. Dodds 的这篇博文中所述的 css 变量.效果也很好，具体取决于您的用例.

Take this simple situation:

I have a container, with an h1 nested inside of it. I want to pass some props into both elements that will change their colour depending on a light / dark theme; eg: white text / black bg || black text / white bg

Problem: it would appear the props (color & text) being passed to the styled components are not cascading in the way that I would assume they would.

Simple example:

export function Heading(props) {
return (
    <Container {...props}> // I would expect the props obj to be available by nested Heading el
      <Heading>
        {props.text}
      </Heading>
    </Container>
  )
}

// styled components 

export const Container = styled.div`
  padding: 20px;
  background-color: ${props => props.color === dark ? "black" : "white";
`;

export const Heading = styled.h1`
  background-color: ${props => props.color === dark ? "white" : "black"; // does not take affect
`;

Instead I have to do:

    <Container {...props}> // Pass to container
      <Heading {...props}> // Pass to heading el
        {props.text}
      </Heading>
    </Container>

Question:

Can I get the Heading to pick up the {...props} passed to Container without declaring it twice?
Or am I misunderstanding how styled components are supposed to behave?

解决方案

so the best way to solve this is using themes. Since your container is a styled-component it has the built-in capability.

So if you add a theme prop to it, it will cascade the theme down to every child that is also a styled-component:

export function Heading(props) {
return (
    <Container theme={{mode: 'light'}}>
      <Heading> // this heading would receive this theme object as a prop.
        {props.text}
      </Heading>
    </Container>
  )
}

export const Heading = styled.h1`
  background-color: ${({theme}) => theme.mode === "dark" ? "white" : "black"};
`;

export const ButtonInsideHeading = styled.h1`
  background-color: ${({theme}) => theme.mode === "light" ? "black" : "white"};
`;

The same goes for that button you mentioned in the comment. Styled-components will inject this theme prop, not matter how many levels deep down they are. So your Button styled-component would inherit theme from the Heading that inherited itfrom Container. It can get a bit verbose, but not necessarily messy.

You can also use css variables as described in this post by Kent C. Dodds. Works pretty well too, depending on your use case.

这篇关于通过嵌套的样式组件传递道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！