スタイルを適用する

classNameとstyle

サービスを実装するにあたり、基本的なスタイルを独自に定義することになると思います。 React.jsでは全ページとしては統一感をもったスタイルを適用するとともに、コンポーネントごとにスタイルを指定することができます。前段階として、 htmlに直接cssを適用する場合、 <button class="btn btn-default"/> のようにclassを指定する方法が一般的な方法としてあげられますが、 React.jsのJSXで定義する場合、classの代わりに、 <button className="btn btn-default"/> とclassNameを指定することになります。また、直接コンポーネントのスタイルを指定したい場合はstyleを指定することもできます。 <button className="btn btn-default" style={{color:"gray"}}/> のように、{{}}で囲んで指定することになります。変数で定義しておいて、指定する場合は、

var Component = React.createClass({
  render:function(){
    var btnstyle = {
      color: "red"
    };
    return (
      <button className="btn btn-default" style={btnstyle}/>
    );
  }
});

のようになります。 JSXの中で、

変数
真偽値
数値

を指定する場合、key={value}のように指定するためです。

実際にソースを書いてみる

以上を踏まえて、実際のソースに適用してみます。フッタを画面の一番下に固定して表示されるようにしてみます。それぞれのファイルは以下のように書き換えています。 main.cssファイルをclient/cssに置きます。

#main.css
html,body{
  height:100%;
}
#content{
  width: 100%;
  position: relative;
  min-height: 100%;
}
.main{
  padding-bottom:40px; /*フッターの高さと同じ*/
}
footer{
  height: 40px;
  width: 100%;
  position:absolute;
  bottom:0;
}

//index.html
<!DOCTYPE html>
<html>
  <head>
    <title>tutorial</title>
    <meta charset="UTF-8">
    <!--main css-->
    <link rel="stylesheet" href="css/main.css">//自分で定義したcss
  </head>
  <body>
    <div id="content"></div>
    <script src="./build/app.js"></script>
  </body>
</html>

//index.js
var React = require('react');
var Header = require('./views/header.jsx');
var Body = require('./views/body.jsx');
var Footer = require('./views/footer.jsx');

//classNameでcssを指定
var Index = React.createClass({
  render:function(){
    return (
      <div>
        <Header/>
        <div className="main">
          <Body/>
        </div>
        <Footer/>
      </div>
    );
  }
});

React.render(
  <Index />,
  document.getElementById('content')
);

//header.jsx
var React = require('react');

//ヘッダの定義
var Header = React.createClass({
  render: function(){
    return (
      <header>
        <h1>ヘッダです</h1>
        <hr/>
      </header>
    );
  }
});

module.exports = Header;

※ヘッダは特に変更することもなかったのですが、便宜上変更しています。

//body.jsx
var React = require('react');

//ボディの定義
var Body = React.createClass({
  render: function(){
    return (
      <div style={{textAlign: "center"}}>
        <h1>ボディです</h1>
      </div>
    );
  }
});

module.exports = Body;

styleのkeyは上記のようにキャメルケースで記述します。 text-alignと記述してしまうと適用されません。

//footer.jsx
var React = require('react');

//フッタの定義
var Footer = React.createClass({
  render: function(){
    return (
      <footer style={{textAlign: "center"}}>
        <hr/>
        <span>フッタです</span>
      </footer>
    );
  }
});

module.exports = Footer;

上記ではfooterタグにcssスタイルが適用されるようにしつつ、直接スタイルも指定しています。

サンプルソース

https://github.com/kunitak/react-tutorial/tree/day3 次回→今からはじめるReact.js〜React ver0.14〜

この記事を書いた人 : 國田健史

その他のスタッフブログ:

一覧へ戻る

今からはじめるReact.js〜スタイルの適用〜

スタイルを適用する

classNameとstyle

実際にソースを書いてみる

サンプルソース

JOIN OUR TEAM