如何将使用styled-components的React组件与外部CSS文件关联？

先修正你组件代码里的明显错误 #

你定义的组件是Flow，但导出的是AboutFlow，这会导致导入组件时出错，先把导出语句改成：

export default Flow;

方法一：组件内直接导入外部CSS文件 #

这是最常用的局部关联方式，步骤如下：

1. 确认外部CSS文件的相对路径，假设你的CSS文件名为styles.css，和React组件文件在同一目录下，若不在则调整路径为../css/styles.css这类对应层级的路径。
2. 在组件文件顶部添加CSS导入语句，和styled-components的导入放在一起。
3. 在JSX元素上通过className属性使用CSS中定义的类名。

修改后的React组件代码示例 #

import styled, { keyframes } from "styled-components";
// 导入外部CSS文件，路径根据实际情况调整
import './styles.css';

const Flow = () => {
    return (
        {/* 给容器添加外部CSS的body类 */}
        <Container className="body">
         <FlowBox>
          <FlowWrap>
            <Flow>
              <span>King of pirates</span>
              <span>King of pirates</span>
              <span>King of pirates</span>
              <span>King of pirates</span>
            </Flow>
          </FlowWrap>
          {/* 示例：使用外部CSS的title类 */}
          <div className="title">页面标题</div>
        </FlowBox>
        </Container>
    )
}
// 修正导出名称
export default Flow;

// 以下是你的styled-components样式，保持不变
const Container = styled.div`
    margin:100px 0 0 0;
    border-top:1px solid #000;
    border-bottom: 1px solid #000;
`
const flowing = keyframes`
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
`

const FlowBox = styled.div`
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
`

const FlowWrap = styled.div`
    display: flex;
    top: 0;
    left: 0;
    align-items: center;
    width: 100%;
    height: 100%;
    white-space: nowrap;
`


const Flow = styled.div`
    font-size: clamp(15px, 10vw, 8rem);
    animation: ${flowing} 8s linear infinite;
    span{
        display:inline-block;
        font-weight:600;
        padding:0 20px;
    }
`

方法二：全局导入CSS文件（适用于通用样式） #

如果你的外部CSS是全项目通用的样式，可以在项目入口文件（比如index.js）中导入，这样所有组件都能直接使用这些样式：

// index.js文件中
import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles.css'; // 全局导入外部CSS
import App from './App';

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

关键注意事项 #

• 图片路径问题：把静态图片放到项目的public文件夹下（比如public/img/upper_blackbar_edit.png），然后CSS中的路径写成url(/img/upper_blackbar_edit.png)，避免打包后路径失效。
• 样式优先级：styled-components的样式是内联样式，优先级比外部CSS高，若出现样式冲突，可通过给外部CSS类名添加父级选择器来提升权重。

内容的提问来源于stack exchange，提问作者DinosaurS