Question

让我们创建具有特定样式的 <Title> 和 <Wrapper> 组件。

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

// Create a <Title> component that renders an <h1> which is centered, red and sized at 1.5em
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`

// Create a <Wrapper> component that renders a <section> with some padding and a papayawhip background
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`

Title 和 Wrapper 变量现在是可以像任何其他 react 组件一样渲染。

<Wrapper>
  <Title>{'Lets start first styled component!'}</Title>
</Wrapper>