reactjs - 当我使用样式组件时我应该使用普通标签吗？

Question

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

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

Answer 1

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

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>和<p>都是普通的 html 标签，而 <Box>是一个样式组件。正如您在本例中所看到的，<h3>和<p>标签仍然可以使用 css 进行样式设置(只要它们是 <Box> 的子级)。