web-dev-qa-db-ja.com

CSSファイルをスタイル付きコンポーネントにインポート

CSSファイルをスタイル付きコンポーネントにインポートする方法はありますか？

私の依存関係の1つである React Quill Editor は、CSSをベースとしてインポートし、その上に変更を適用することでテーマ設定できます。私のコンポーネントはすべてスタイル付きコンポーネントであり、CSSを「グローバル」スタイルとしてインポートするのではなく、CSSをJSコンポーネントにローカライズしたままにしたいと思います。

今、私は彼らの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がグローバルに適用されます。

ベスト、ダニエル

reactjsquillstyled-components
6
dankez

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を介してスタイルがグローバルに追加されるのを防ぐことができます。

!!をリクエストに追加すると、構成で指定されたすべてのローダーが無効になります

2
jonathanhculver

そのためには、css-loader以外のローダーを使用する必要があります。グローバルスタイルシートに追加するのではなく、styled-components用に準備する別のローダーを作成することもできます。

ただし、css-loaderが必要な場合は、どのcssファイルが処理され、どのcssファイルがスタイル付きコンポーネント用にロードされるかを定義する必要があります。

1
Nappy

これは私がやった方法です：

コード

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

0
Mosè Raguzzini

私の理解によると、styled-componentsはとにかく本質的にテンプレートリテラルです。

唯一の問題は、インポートされた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}
`;
0
Aasmund Berge Endresen