Shadow DOM (Shadow Boundary)
<div> <style> .title { color: #444; } </style>
<h3 class="title">Item name</h3> </div>
Scoped CSS
<div> <style scoped> .title { color: #444; } </style>
<h3 class="title">Item name</h3> </div>
Emulated@Component({ selector: 'my-app', encapsulation: ViewEncapsulation.Emulated, styles: [` .test { padding: 10px; } `], template: ` <div class="test">Test</div> ` })
<body> <my-app _nghost-cmy-1=""> <div _ngcontent-cmy-1="" class="test">Test</div> </my-app> </body>
.test[_ngcontent-cmy-1] { padding: 10px;}
Native= Shadow DOM
<body> <my-app> ▾ #shadow-root <style> .test { padding: 10px; } </style> <div class="test"> <div>Test</div> </div> </my-app> </body>
<my-tag> <h3>{ opts.title }</h3>
<style scoped> :scope { display: block; border: 2px } h3 { color: blue } </style> </my-tag>
↓<style> my-tag { display: block; border: 2px } my-tag h3 { color: blue } </style>
<style scoped> .example { color: red; } </style>
<template> <div class="example">hi</div> </template>
↓<style> .example[_v-f3f3eg9] { color: red; } </style>
<template> <div class="example" _v-f3f3eg9>hi</div> </template>
CSS in JSconst styles = { root: { color: color || avatar.color, backgroundColor: backgroundColor || avatar.backgroundColor, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: size / 2, borderRadius: '50%', height: size, width: size } };
return( <div style={ styles.root }></div> );
CSS in JS 系リポジトリ
cssinjs/jsscssinjs/react‑jssFormidableLabs/radiummartinandert/react‑inlinesmyte/jsxstyle
var Radium = require('radium'); var React = require('react'); var color = require('color');
@Radium class Button extends React.Component { render() { return ( <button style={[ styles.base, styles[this.props.kind] ]}></button> ); } }
var styles = { base: { color: '#fff', ':hover': { background: color('#0074d9').lighten(0.2).hexString() } }, ... };
(因みに) こうなった@charset 'utf-8'; @import 'core/config';
.datepicker,
.timepicker { font-size: 12px !important; display: block !important; overflow: hidden; width: 100px !important; height: auto !important; border-width: 0 !important; > div { &:first-child { line-height: inherit !important; width: auto !important; height: auto !important; } } input { line-height: 2 !important; height: 36px !important; padding: 0 10px !important; text-align: center; color: $colorFont !important; border: 1px solid #ccc !important; background-color: #fff !important; }
/* volume-slide.scss */ .slider { position: relative; height: 100%; &__track { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; margin: auto 0; background-color: rgba(255,255,255, .2); } &__handle { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; cursor: pointer; border-radius: 50px; background-color: #fff; &:before { position: absolute; top: 0; bottom: 0;
// volume-slider.react.js import styles from './volume-slider.scss';
render:
<slider className={ styles.slider }> <div className={ styles.slider__track + ' ' + styles.black }></div> <div className={ classnames(styles.slider__handle, styles.black) }></div</slider>
出力:
<slider class="volume-slider__slider___2qmBE"> <div class="volume-slider__slider__track___1Okwk volume-slider__black___3-0A8" <div class="volume-slider__slider__handle___X_x8Q volume-slider__black___3-0A8"</slider>
ファイル名__クラス名__5桁のハッシュ
Webpack{ test: /\.css$/, loaders: [ 'style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 'postcss-loader', ] }
Browserify
modularifypostcss‑modules
React CSS Modules はクラス名はスネークケースもいけるよ
className に style オブジェクト付けなくていいよグローバル, ローカルスコープのクラスが一目瞭然だよ定義してないクラスにエラー吐くよ
// volume-slider.react.js import CSSModules from 'react-css-modules';
import styles from './volume-slider.scss';
render:
<div styleName="slider"> <div styleName="slider__track"></div> <div styleName="slider__handle"> </div></div>
export default CSSModules(VolumeSlider, styles);
出力:
<div class="volume-slider__slider___2qmBE"> <div class="volume-slider__slider__track___1Okwk volume-slider__black___3-0A8" <div class="volume-slider__slider__handle___X_x8Q"></div> </div>
グローバルなクラス = className
render:
<div className="global-css-class" styleName="slider"> <div styleName="slider__track"></div> <div styleName="slider__handle"> </div></div>
ES7 Decorator がおすすめ
@CSSModules(styles, { allowMultiple: true }) export default class VolumeSlider extends React.Component {}
import Select from 'react-select';
// Be sure to include styles at some point, probably during your bootstrappingimport 'react-select/dist/react-select.css';
react‑select・react‑spinner・react‑slider