css-modules-react

css-modules-react.js

/* item.css 
 webpack使ってscoped cssにしたい
*/

.item {
  width: 100%;
}

.item-text {
  color: red;
}

/* item.js */
import styles from './item.css';
import classNames from 'classnames' // ２つクラス名指定したいときとかに使えるpackage

render() {
  return (
    <div className={styles.item}>
      <span className={styles['item-text']} />
    </div>
  );
}

// 最悪これでも... あんま書きたくない。scopedではある これはcss-in-jsだけど
styles() {
 return {
   item: {
     width: "100%",
   },
   itemText: {
      color: "red",
    },
 };
}

// ↑css-in-jsにしたいけど↑が嫌だったら https://github.com/styled-components/styled-components
import React from 'react';
import styled from 'styled-components';

// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;