BETA

Reactのスタイリングについての備忘録

投稿日:2020-03-30
最終更新:2020-03-30

インライン指定

style属性にハッシュで指定

ex)text-align -> textAlign
" - "はキャメルケースで記述

<h1 style={{  
        "color": "red",  
        "textAlign": "center"  
      }}>Hello, World!</h1>  

classの付与(インライン)

.main {  
  color: red;  
  text-align: center;  
}  
<h1 className="main">Hello, World!</h1>  

classSet

classSetは動的にクラスを付与できる

import classSet from 'react-classset'  

// classSet({  
//   class名:true or false  
// })  

<div className={classSet({  
          main: true, // 常時付与  
          hovered: isOver  
          // 変数isOverがイベント処理によって動的に変化(true/false)  
         // .hoveredが動的に付与  
        })}>  
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

30歳を目前にして、Webエンジニアを目指す愚か者です。 日々の学びを定着させるために、TECH系の記事を投稿していきます。 そしてできる限り少しでも同じような境遇の人の助けになるような情報発信を目指します。 現在学んでいるReact(JS)・Railsを中心にインフラやツール関連の投稿が主となるかと思います。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう