styled-components 的项目引入 CSS的几种方法

在一个使用 styled-components 的项目中，通常有以下几种方式来引入和应用 CSS 样式：

1. 全局样式

可以通过 createGlobalStyle 创建全局样式，将其应用到整个应用中。这是常用于引入一些全局的 CSS 文件或定义通用样式的地方。

// GlobalStyles.js
import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  /* 直接写 CSS 样式 */
  body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
  }

  /* 引入外部 CSS 文件 */
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

  /* 也可以添加其他全局样式 */
`;

export default GlobalStyles;

在根组件中引入 GlobalStyles：

// App.js
import React from 'react';
import GlobalStyles from './GlobalStyles';

function App() {
  return (
    <>
      <GlobalStyles />
      <div>Your app content</div>
    </>
  );
}

export default App;

2. 直接引入外部 CSS 文件

如果有现成的 CSS 文件，可以在根文件中直接引入，例如在 index.js 中：

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './styles.css'; // 引入外部 CSS 文件

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

3. 在 styled-components 内部使用 CSS

如果需要在特定组件中应用外部 CSS 类，可以利用 styled-components 的 css 方法引入样式：

import styled, { css } from 'styled-components';

// 创建带有外部 CSS 类的样式
const CustomButton = styled.button`
  background-color: #4CAF50;
  color: white;

  /* 引入外部类的样式 */
  &.active {
    background-color: red;
  }

  ${(props) =>
    props.primary &&
    css`
      background: blue;
      color: white;
    `}
`;

export default CustomButton;

4. 使用 styled-components 的 attrs 方法传入外部样式类

可以利用 attrs 将外部 CSS 类名传递给组件实例：

const CustomButton = styled.button.attrs({
  className: 'my-custom-class', // 外部定义的 CSS 类
})`
  background-color: #4CAF50;
  color: white;
`;

// 例如，引用一个外部样式库中的 class
import 'path-to-your-css-file.css';

以上方式可以根据需求组合使用，确保样式文件既满足项目中的全局样式，也能灵活地应用到局部组件中。