当我使用样式组件时，我应该使用普通标记吗

Question

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

我的div是在styled Component中设置样式的，如果我在其中有一个p标记，我应该也设置这个p标记的样式吗？或者我可以有一个普通的标签和"stylecomponent-tag">

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>的子级(。

Answer 2

使用styled-components，基本上一次只设置一个html元素或react组件的样式。

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

这将创建并返回一个react组件。每个react组件都有一个隐含的children道具，所以您可以使用StyledDiv来包装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>

如果需要对<p>进行样式设置，则只需要对其进行样式设置即可，否则也没关系，因为子元素/组件可以是任何有效的JSX元素。