React ComponentとCSSの継承

ActionButton.jsx

"use strict";
import React from "react";
import classNames from "classnames";
export default class ActionButton extends React.Component {
    render() {
        return <button {...this.props}
            className={classNames("ActionButton", this.props.className)}>
            {this.props.children}
        </button>
    }
}

react-component-css.md

Components

分類

• project/
  • プロジェクト固有のUI
• ui/
  • UIを抽象化したもの
  • projectがuiを継承したプロジェクト固有UIを実装する

例) ActionButton

ActionButton を継承したコンポーネントにはActionButtonというクラスが付加される。

import React from "react";
import ActionButton from "../../ui/ActionButton";
import Icon from "../../ui/Icon"
export default class BookmarkButton extends React.Component {
    render() {
        return <ActionButton className="BookmarkButton">
            <Icon src="./assets/buttons/bookmark-icon.png"/>
            <span className="BookmarkButton-title">ブックマーク</span>
        </ActionButton>
    }
}

この時 BookmarkButton のclass属性値は

• BookmarkButton
• ActionButton

となる(class="ActionButton BookmarkButton")

• ActionButton 共通のスタイルは ui/ActionButton.css へ
• BookmarkButton 固有のスタイルは components/BookmarkButton.css へ

それぞれ書くことで、コンポーネントとCSSの継承を関連づけている。

.ActionButton {
    padding: 0.1em 0.5em;
    margin: 0.3em;
}

と

.BookmarkButton {
    background-color: black;
}

.BookmarkButton-title {
    color: white;
    vertical-align: middle;
}

という感じでスタイルも共通と固有がファイルとして分離できる?

Next https://gist.github.com/azu/99edc02ba53256599d5f