Question

在样式化的组件环境中，假设我有：

<Header>
  <List ...>
    <ListItem ... />
    <ListItem ... />
    <ListItem ... />
  </List>
</Header>

我想为ListItem提供一些样式，这些样式仅在Header中使用此组件时才适用。

我应该将道具传递给List，然后该组件应该将其传递给ListItem，以便可以在ListItem中包括一组样式吗？

或

我应该在Header中设置ListItem的样式，因为它们是只能使用一次的样式，并且我不想让ListItem弄脏整个应用程序中可能发生的所有可能性。另外，我无权访问呈现的ListItem组件，因为它们是由List呈现的。

Answer 1

您似乎可以在这里不传递prop：只能通过CSS特定性来处理。例如，您可以在列表项中添加相应的类名，这将告诉Header样式的组件选择器为其应用样式，如下所示：

if(ishHub == true){
  join CMD in context.CityMasters on SLD.City equals CMD.ID
} 
else {
 join CMD in context.CountryMasters on SLD.Country equals CMD.ID
}

，您的列表项将如下所示：

const HeaderWithClassNameSpecificity = styled.div`
  .inside-header { // apply this to Header children with className="inside-header"
    background: salmon;
  }
`;

另一种方法是根据标签名称的特殊性来设置Header子元素的样式，并且您的Header将是

 <ListItem className="inside-header" />

因此您无需将className添加到ListItem，前提是它是“ ul”的子项，并且是“ ul”的子项。

这两种方法之间的选择将取决于您的整体应用程序体系结构，但请记住，基于类的特异性在浏览器性能方面更合适（当您在其中具有许多相同的标签和相当复杂的标签选择器时，应考虑使用CSS）。

在此处检查概念证明：https://codesandbox.io/s/wy35njlmyl

Answer 2

styled-components为referring to other components提供了一种内置方式：

const Container = styled.div`
  ${Header} {
    background-color: yellow;
  }
`;

示例：

const { render } = ReactDOM;
const styled = styled.default;

const Header = styled.h1`
  color: red;
`;

const Container = styled.div`
  ${Header} {
    background-color: yellow;
  }
`;

function App() {
  return (
    <main>
      <Header>Header</Header>
      <Container>
        <Header>Header inside Container</Header>
      </Container>
    </main>
  );
}

render(<App />, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/3.4.10/styled-components.js"></script>
<div id="root"></div>

Answer 3

标题ListItem { / *现在在这里写下您的样式，因此样式将不适用于不在标题内的ListItem 祝好运 * /

}

样式化的组件样式应放在组件树中的什么位置？

3 个答案: