web-dev-qa-db-ja.com

ReactコンポーネントにCSSとスタイルを適用する方法

私は探していましたが、作成したReact.jsファイルをスタイルする方法を見つけることができず、標準のWebページから変換したため、元のCSSがありますが、どのようにReactを使用して、適切なスタイルでページを表示します。

助けていただければ幸いです！

var NavBar = React.createClass({
  render: function() {
    return (
      /* NavBar */
      <div className="dark_bg_color">
        <img src="logo.png" />
        <div className="table_center">
          <div>
            <ul>
              <li>daily specials</li>
              <li>gift gallery</li>
              <li>events</li>
              <li><i className="fa fa-search" />&nbsp;search</li>
            </ul>
          </div>
        </div>
        <div className="right_nav">
          <div className="table_center">
            <div>
              <button type="button">Sign Up</button>
              <button type="button">Log In</button>
              <div className="vertical-line">&nbsp;</div>
              <button type="button">Cart</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
});
ReactDOM.render(<NavBar />, document.getElementById('nav'));

var Gallery = React.createClass({
  render: function() {
    return (
      /* Gallery */
      <div >
        <div align="middle">
          <div id="head">
            <img id="pic" align="middle" max-width="100%" src="title_pic.png" />
            <div align="left" className="big">
              <div>
                <span>Dine with the Best</span>
                <div className="words">
                  <span>BonApp connects you with limited-time, exclusive meals and events offered by the city’s best chefs.<br /><br /><br /><button type="button">JOIN BONAPP</button></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
});
ReactDOM.render(<Gallery />, document.getElementById("Gallery"));

var WhatsNew = React.createClass({
  render: function() {
    return (
      <div  className="dark_bg_color">
        <h2 style={{marginBottom: 30}}>
          <span>What's New</span>
        </h2>
        <div className="autoplay">
          <img src="whatsnew0.png" />
          <img src="whatsnew1.png" />
          <img src="whatsnew0.png" />
        </div>
      </div>
    );
  }
});
ReactDOM.render(<WhatsNew />, document.getElementById("whatsnew"));

var BonEvents = React.createClass({
  render: function() {
    return (
      /* Events */
      <div id="events" className="dark_bg_color">
        <div className="box">
          <div className="box-text">
            <div className="horizontal-line" />
            <div><div className="horizontal-line" /><p>LES BON CADEAUX</p></div>
            <div className="horizontal-line" />
          </div>
        </div>
        <h2>
          <span>Bon Events</span>
        </h2>
        <div>
        </div>
      </div>
    );
  }
});
ReactDOM.render(<BonEvents />, document.getElementById("events"));

var IOS = React.createClass({
  render: function() {
    /* IOS */
    return (
      <div >
        <h2>
          <span />
        </h2>
      </div>
    );
  }
});
ReactDOM.render(<IOS />, document.getElementById("advertiseApp"));

var Footer = React.createClass({
  render: function() {
    return (
      /* Footer */
      <div>
        <div className="footer_center">
          <div>
            <ul>
              <li>ABOUT</li>
              <li>PRESS</li>
              <li>CONTACT</li>
              <li>SUPPORT</li>
              <li>BONAPP FOR RESTAURANTEURS</li>
            </ul>
          </div>
        </div>
        <div className="legal_center">
          <div>
            <ul>
              <li>Copyright © 2016 BonApp Dining Inc.</li>
              <li>Privacy Policy</li>
              <li>Legal</li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
});
ReactDOM.render(<Footer />, document.getElementById("footer"));
htmlcssreactjs
39
Jake Orben

質問を最初に読むと、Webページを「React-ify」するときに既存のCSSが機能していないように見えます。

そうすべき。

そうでない場合は、修正するためにさらに診断する必要のある何かが進行中です。最近Reactのプロジェクトの1つを書き直し、まったく同じCSSファイルを使用し続けました。

ただし、これについて最善の方法について尋ねている場合...

他の人が言ったように、 Reactはインラインスタイルを好む 。

ただし、しません。それは乱雑で、変更するのが難しく、簡単に扱いにくいものになります。

Reactでスタイルを設定するには、SCSSまたはLESSが最適です

しかし、なぜ？いくつかの理由があります。

CSSは再利用可能です

Reactの方法でインラインスタイルを設定すると、いくつかのコンポーネントに対してgreatが機能します。

しかし、これらのコンポーネントが積み重なると、同じスタイルを何度も使用していることに気付き始めます。それは吸う。

変更は簡単です

コンポーネントのスタイルを更新する必要がある場合、Reactコードを調べて適切なコンポーネント（または親コンポーネントでしたか？）を見つけて修正する必要はありません。

代わりに、いつも使用しているようにCSSを使用してください。

上書きを心配する必要はありません

CSSのカスケード部分では、インラインスタイルが最終的なストップです。それらはすべてを上書きします。

最初は、あなたが実装しているスタイルに対する素晴らしい解決策のように思えます。パンフレットのウェブサイトでは、おそらくそれでいいでしょう。しかし、より大きなアプリで作業を開始すると、トラブルシューティングがほとんど不可能な問題に遭遇します。

CSSのカスケード部分と戦う代わりに、CSSを使用してスタイルを同じ場所に保ちます。

どこでもSCSSとLESSを使用します

私にとって最大のポイントは、はいです。Reactで作業していて、インラインスタイルを好む場合は、うまく機能します。

しかし、他のフレームワークに移行するとどうなりますか？突然、これらのインラインスタイルはあまりうまく機能せず、私たちと一緒に「通常の」CSSを書くことに戻ります。それでは、なぜ1つのフレームワークだけを変更するのでしょうか？

フルタイムでReactで作業している場合、新しいベストプラクティスを試すのは理にかなっていますが、ほとんどの場合、使用できるのはホイールを再発明するだけでは意味がありません車のあるモデルのホイール。

34
Caleb Anthony

物事を区分化したい場合は、スタイリングしている特定のコンポーネント用に.scssファイルを作成し、それをコンポーネントファイルにインポートできます。

例：

フォルダー構造：

components
|
|--Card
   |
   |--Card.js
   |--Card.scss
   |--index.js
|--Some Other Component Folder

Card.js：

import React, { Component } from 'react';
import classes from './Card.scss';

export class Card extends Component {

    render () {
        return (
            <div className={`${classes.layout} col`}>
                <div className={`${classes.card} card`}>
                    <div className="card-image">
                        <ProviderImage />
                    </div>
                </div>
            </div>
        );
    }
}

export default Card;

Card.scss：

.layout {
    img {
        display: block;
        max-width: 372px;
        max-height: 372px;
        height: auto;
        width: auto;
    }
}

.card {
    width: 370px;
    height: 550px;
}

これにより、それぞれのコンポーネントに含まれるスタイルが保持されます。

11
adriennetacke

技術的には、通常のCSSファイルと同様に、HTMLドキュメント<head>にCSSを追加できます。 Reactコンポーネントのクラスが同じである限り（明らかにclassNameだけでなくclassとして適用される場合を除く）、動作します。

より現代的でJavascript指向の何かを探しているなら、 CSS Modules を調べて、ここでそれらについてもっと読むことができます：

https://css-tricks.com/css-modules-part-1-need/

ただし、明らかに2番目のアプローチにはもう少し学習曲線があります。

7
Toby

Vijayが述べたように、 Reactはインラインスタイルを好む 。

一般的なパターンの1つは、各コンポーネントがそのコンポーネントで使用されるすべてのスタイルを含む単一のstylesオブジェクトを持つことです。

var styles = {
  navBar: {
    backgroundColor: 'dark blue'
  },
  center: {
    textAlign: 'center'
  },
  rightNav: {
  },
  verticalLine: {
  },
};

var NavBar = React.createClass({
  render: function() {
    return (
      <div style={styles.navBar} >
        <img src="logo.png" />
        <div style={styles.center} >
          <div>
            <ul>
              <li>daily specials</li>
              <li>gift gallery</li>
              <li>events</li>
              <li><i className="fa fa-search" />&nbsp;search</li>
            </ul>
          </div>
        </div>
        <div style={styles.rightNav}>
          <div style={styles.center}>
            <div>
              <button type="button">Sign Up</button>
              <button type="button">Log In</button>
              <div style={styles.verticalLine} >&nbsp;</div>
              <button type="button">Cart</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
});
3
Hamms

まず、cssまたはscssファイルをインポートする必要があると思います。次のような直接パスで行うことをお勧めします。

import "components/card/card";

これが機能するためには、プロジェクトでSASSローダーとwebpackを実行する必要があります。

Webpack.configにsassローダーが必要です

  module: {
    loaders: [
      {test: /\.scss$/, loaders: ["style", "css", "sass"]},
      {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
      {test   : /\.woff|\.woff2|\.svg|.eot|\.ttf|\.png/, loader : 'url?prefix=font/&limit=10000&name=/assets/fonts/[name].[ext]'
      }
    ]

"sass-loader": "^3.0.0",を使用して再構成しました

ローダーはWindowsで動作するための回避策が必要です。Macでは正常に動作します：

  • フォルダーオプションに隠しファイルを表示します。

  • 「user/appData」フォルダーに移動します。C：\ Users\user\AppData\Roaming\npmにあります。

  • Windows環境変数を追加します：NODE_PATH C：\ Users\user\AppData\Roaming\npm\nodeModules

  • コマンドnpm install -gを実行します

  • コマンドプロンプトを閉じて再度開きます。

これを使用すると、sassをロードしてwebpackでコンパイルできます。reactで使用することをお勧めします。本当に強力です。

Webpackを使用していない場合は、こちらで詳細を確認できます。 http://webpack.github.io/docs/tutorials/getting-started/

そして、ここでwebpackビルドプロセスの例を確認できます： なぜwebpack bundle.jsとvendor.bundle.jsが非常に大きいのですか？

1
Vinicius Vieira

Sassでは、HTMLの同じ視覚的階層に従う方法でCSSセレクターをネストできます。規則をネストしすぎると、CSSが過剰に修飾され、保守が難しくなる可能性があり、一般的に悪い習慣と見なされます。例で説明しましょう。

Hero.jsx

import "./Hero.scss";

import React, { Component } from "react";

class Hero extends Component {
  render() {
    return (
      <div className="hero-component">
        <span className="hero-header">Scss is awsome.</span>
      </div>
    );
  }
}

export default Hero;

Hero.scss

.hero-component {
    .hero-header {
        <!-- Hero header style goes here -->
    }

    .other-class {}
}
1
Anoop M

Sass (.scss)を使用して、Reactコンポーネントのスタイルを設定します。 PostCSSも使用しました。また、モジュール化されています。ワークフローで設定したら（webpackを使用）、Reactアプリのスタイルを設定するために必要なことは、style.scss（はい、.scss）をインポートすることだけです。インポートされたパーシャルなどを、メインindex.jsとともにルートにあるApp.jsファイルに格納します。ここで、アプリを機能させるために必要な他のすべてのものも存在します。たとえば、これは、現在作業中のReactアプリの場合の外観です。

Index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import 'core-js/es6/map';
import 'core-js/es6/set';
import App from './App';
import './favicon.ico';
import './style/style.scss';

ReactDOM.render(
    <App />, document.getElementById('root')
);
0
Maria Campbell