> For the complete documentation index, see [llms.txt](https://dahlia-cn.gitbook.io/dahlia/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dahlia-cn.gitbook.io/dahlia/styles/styled-components.md).

# 使用 styled-components

[styled-components](https://github.com/styled-components/styled-components) 是最优秀的 CSS in JS 解决方案之一，在 `Dahlia` 中使用非常简单。

首先，安装 `styled-components`

```bash
yarn add styled-components
```

快速使用：

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

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`

export const App = () => (
  <Wrapper>
    <Title>Hello World!</Title>
  </Wrapper>
)
```

为了更好的调试体验，`Dahlia` 默认集成了 [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components)，集体用法看：[babel-plugin](https://www.styled-components.com/docs/tooling#babel-plugin)。

详细文档: [https://github.com/styled-components/styled-components](https://github.com/forsigner/dahlia-docs-cn/tree/eeafeac56c3dd2cca4087e3702c63de72bab1f4e/styles/styled-components/README.md)

对于 VSCode 用户，为了能有良好的开发体验，推荐按相关 VSCode 插件：

* [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components) - 用于语法高亮