Question

有没有办法将CSS文件导入样式化组件？

我的一个依赖项React Quill Editor可以通过导入CSS作为基础并在其上应用更改来设置主题。我的所有组件都是样式化组件，我希望将CSS本地化为JS组件，而不是将CSS作为“全局”组件导入。风格。

现在我已经采用以下形式将CSS复制到我自己的文件中了。

我在下面写了一个简短的例子。

/** editorCSS.js **/
import { css } from 'styled-components';
export default css`
/* copied CSS here */

.class-to-extend {
   color: green;
}
`


/** EditorComponent.js **/ 
import styled from 'styled-components';
import ReactQuill from 'react-quill';
import editorCSS from './editorCSS';

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

我更倾向于在样式化组件的范围内导入引用它们的css文件与复制它。

如果我执行import ReactQuillCSS from 'react-quill/dist/quill.snow.css';，由于css-loader插件，它仍将全局应用我的CSS。

最佳，丹尼尔

Answer 1

您可以添加module rule，以将样式从CSS文件本地导入到样式化的组件中。

例如从.css导入所有第三方node_modules文件为raw string，并照常导入其他文件：

// 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的solution相比，它具有一些优势：

一个中央配置文件确定如何处理.css文件
遵循Webpack的建议：

尽可能使用 module.rules ，因为这会减少源代码中的样板，并且如果出现问题，可以使您更快地调试或定位装载程序。（docs）
避免ESLint错误-看一下Codesandbox演示
css-loader仍然可以解析@import和url()来获取外部CSS文件，raw-loader不能

Answer 2

要实现这一点，您需要使用与private void StartAudioBroadcastReceiver() { try { AudioManager manager = (AudioManager)GetSystemService(Context.AudioService); m_bluetoothReceiver = new BluetoothReceiver() { Audiomanager = manager }; manager.Mode = Mode.Normal; bool bluetoothMicAvailable = manager.IsBluetoothScoAvailableOffCall; if (bluetoothMicAvailable) { manager.BluetoothScoOn = true; manager.StartBluetoothSco(); } } catch (Exception ex) { } }不同的加载器。您可以编写一个不同的加载器来为public void PlayWAV(byte[] data) { string fileName = Android.App.Application.Context.GetExternalFilesDir(null).AbsolutePath + "/Trimmed.wav"; using (FileStream file = new FileStream(fileName, FileMode.Create, System.IO.FileAccess.Write)) { file.Write(data, 0, data.Length); } MediaPlayer player = new MediaPlayer(); Java.IO.FileInputStream fos = new Java.IO.FileInputStream(fileName); player.Prepared += (s, e) => { player.Start(); }; player.SetDataSource(fos.FD); player.Prepare(); }做准备，而不是将其添加到全局样式表中。

如果您需要css-loader，则需要定义要处理的css文件以及为样式化组件加载的css文件，这实际上并不实用。

Answer 3

您可以使用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全局添加样式

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

Answer 4

这是我的做法：

代码

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Styled from "styled-components";

const fetchStyles = () =>
  fetch(
    "https://gist.githubusercontent.com/bionicvapourboy/61d3d7a8546cb42e0e3194eb9505f48a/raw/5432218dd83320d53d1cbc2f230b81c765183585/style.css"
  ).then(response => response.text());

class App extends Component {
  state = {
    style: ""
  };

  componentDidMount() {
    fetchStyles().then(data => this.setState({ style: data }));
  }

  Wrapper = () => Styled.div`
    ${this.state.style}
  `;
  render() {
    const Wrapper = this.Wrapper();
    return (
      <div className="App">
        <Wrapper>
          <h1>Styled</h1>
        </Wrapper>
        <h1>Not Styled</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

演示

https://codesandbox.io/s/yw7xmx6x3x

Answer 5

从我的理解来看，样式化组件本质上仅仅是模板文字。

您唯一的问题应该是，当您尝试将导入的CSS放入组件CSS中时，将其定义为对象。您是否尝试过先将其类型转换为字符串？

/** EditorComponent.js **/ 
import styled from 'styled-components';
import ReactQuill from 'react-quill';
import editorCSS from './editorCSS';

const newCSS = editorCSS.toString();

export default Styled(ReactQuill)`
  ${newCSS}
`;

Answer 6

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

＆＃13;

const MyStyledComponent = styled(ComponentFromLibrary)`
    color: red;
`;


// and in the render function

return (
    <MyStyledComponent className="libraryClassname" />
);

＆＃13;

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

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

将CSS文件导入到样式化组件

6 个答案:

代码

演示