您可以使用raw-loader加载quill.snow.css样式表，然后将其包含在您的样式组件中。

/** EditorComponent.js **/ 
import styled from 'styled-components';
import ReactQuill from 'react-quill';
import quillCSS from '!!raw-loader!react-quill/dist/quill.snow.css';

const StyledReactQuill = styled(ReactQuill)`
    ${quillCSS}
    /** Additional customization if necessary (e.g. positioning) */
`
export default StyledReactQuill;

根据raw-loader文档，您可以使用!!防止通过全局添加样式css-loader

添加!!到请求将禁用配置中指定的所有加载程序

您可以添加module规则以将样式从 CSS 文件本地导入到样式组件中。

例如，导入所有的第三方.css文件从node_modules作为原始字符串，其他像往常一样：

// webpack.config.js
const config = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"], // load project styles via style-loader
        exclude: /node_modules/, 
      },
      {
        test: /\.css$/,
        use: ["to-string-loader", "css-loader"], // use to-string-loader for 3rd party css
        include: /node_modules/,
      },
      // ...
    ],
  },
  // ...
}

import styled from 'styled-components';
import ReactQuill from 'react-quill';
import ReactQuillCSS from 'react-quill/dist/quill.snow.css' // no custom webpack syntax

const StyledReactQuill = styled(ReactQuill)`
    ${ReactQuillCSS}
    // ... other styles
`

不要忘记安装to-string-loader，如果还没有使用。

这比@jonathanhculver 的解决方案有一些优势：

• 一个中央配置文件决定如何处理.css文件

• 遵循 Webpack 建议：

  尽可能使用module.rules，因为这将减少源代码中的样板文件，并允许您在出现问题时更快地调试或定位加载器。（文档）

• 避免 ESLint 错误 - 看看Codesandbox演示

• css-loader仍然可以解析@import，url()对于外部 CSS 文件，raw-loader不会

为了实现这一点，您需要使用与css-loader. 您可以编写一个不同的加载器来准备它，styled-components而不是将它添加到全局样式表中。

如果需要css-loader，则需要定义由它处理的 css 文件以及为样式组件加载的 css 文件，这使得它并不实用，恕我直言。

据我所知，无法仅在范围内导入常规 CSS。到目前为止，我将样式组件与库中的 CSS 相结合的方式是在 jsx 中为您自己的样式组件提供一个 className。

const MyStyledComponent = styled(ComponentFromLibrary)`
    color: red;
`;


// and in the render function

return (
    <MyStyledComponent className="libraryClassname" />
);

另一个例子可以在官方文档中找到：https : //www.styled-components.com/docs/advanced#existing-css

如果 editorCSS 只是您要应用于组件的样式字符串，那么您提出的建议将起作用。