styled-components怎么用

Styled-components 是一种流行的 CSS-in-JS 库，它允许您以 JavaScript 的方式编写样式，并防止样式冲突。使用 Styled-components，您可以在 React 应用程序中轻松创建可重用的样式组件。

首先，您需要在项目中安装 Styled-components：通过 npm 命令 npm install styled-components 或者 yarn add styled-components。

然后，在您的 React 组件中使用 Styled-components，您可以像下面这样编写样式：

import styled from 'styled-components';

const Button = styled.button`
  color: white;
  background-color: blue;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  &:hover {
    cursor: pointer;
    background-color: red;
  }
`;

在此，您可以创建一个名为“Button”的样式化组件。使用 CSS 模板字面量语法在反引号中创建模板，并使用styled-components的模板标记(tagged template) 将其作为参数传递。

现在，您可以在您的 React 应用程序中使用这个“Button”组件，就像使用任何其他组件一样：

import React from 'react';
import ReactDOM from 'react-dom';
import Button from './Button';

function App() {
  return <Button>Click me!</Button>;
}

ReactDOM.render(<App />, document.getElementById('root'));

这是一个简单的例子，但是您可以使用 Styled-components 创建任何类型的样式化组件，例如文本框、复选框、单选按钮等等。