2

正如我在标题中提到的，当我使用样式组件时，我应该使用普通标签 html 吗？例如：

我的 div 在 Styled Component 中设置样式，如果里面有 ap 标签，我也应该设置这个 p 标签的样式吗？或者我可以只有一个普通标签和“样式组件标签”
4

2 回答 2

3

我有时将两者混合。例如，

import React from 'react';
import styled from 'styled-components';

const Box = styled.div `
  background-color: black;
  padding: 2rem;

  h3 {
    color: orange;
  }

  p {
    color: white;
  }
`

export const InfoBox = () => {
  return (
    <Box>
      <h3>Information</h3>
      <p>An example of paragraph text</p>
    </Box>
  );
};

在这个例子中<h3>，and<p>都是普通的 html 标签，while<Box>是一个样式化的组件。在这个例子中你也可以看到，<h3>and<p>标签仍然可以用 css 设置样式（只要它们是 的子元素<Box>）。

于 2020-11-09T10:14:54.010 回答
0

styled-components你基本上一次只设计一个 html 元素或反应组件。

const StyledDiv = styled.div``;
const StyledMyComponent = styled(MyComponent)``;

这将创建并返回一个反应组件。每个 react 组件都有一个隐式childrenprop，因此您可以使用 yourStyledDiv来包装JSX 中的任何其他元素，这并不重要。

<StyledDiv>
  <p>This is my p-tag text wrapped in my styled div-tag</p>
  <StyledP>This is my styled p-tag text wrapped in my styled div-tag</StyledP>
</StyledDiv>

如果需要设置样式，则只需要样式 a <p>，否则无关紧要，因为子元素/组件可以是任何有效的 JSX 元素。

于 2020-11-06T01:29:30.390 回答