# 使用 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) - 用于语法高亮


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dahlia-cn.gitbook.io/dahlia/styles/styled-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.