[React] Component Styling - 1

1. Style Loaders

// webpack.config.js

// CSS
// import './App.css';
{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction && shouldUseSourceMap,
  }),
  sideEffects: true,
},

// -----------------------------------------------------
// CSS Module
// import styles from './App.module.css';

{
  test: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction && shouldUseSourceMap,
    modules: true,
    getLocalIdent: getCSSModuleLocalIdent,
  }),
},

// -----------------------------------------------------
// SASS
// import './App.scss';
// import './App.sass';

{
  test:sassRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'sass-loader'
  ),
  sideEffects: true,
},

// -----------------------------------------------------
// SASS Module
// import styles from './App.module.scss';
// import styles from './App.module.sass';

{
  test: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent,
    },
    'sass-loader'
  ),
},

2. CSS to SCSS

// src/App.js

import logo from "./logo.svg";
import "./App.scss";

function App() {
  return (
    <div className="App">
      <header className="header">
        <img src={logo} className="logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

# terminal

$ npm i sass

// src/App.scss

.App {
  text-align: center;

  .logo {
    height: 40vmin;
    pointer-events: none;
  }

  @media ... ...;
}

3. CSS Module, SASS Module

• 두 모듈의 사용법은 같음

// src/App.js

import logo from "./logo.svg";
import styles from "./App.module.css";
import Button from "./components/Button";

console.log(styles);

function App() {
  return (
    <div className={styles["App"]}>
      <header className={styles["header"]}>
        <img src={logo} className={styles["logo"]} alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <Button>Button</Button>
      </header>
    </div>
  );
}

# terminal

$ npm i classnames

// src/components/Button.jsx

import styles from "./Button.module.css";
import classNames from "classnames/bind";

const cx = classNames.bind(styles)

class Button extends React.Component {
  state = {
    loading: false
  }

  render() {
    console.log(classNames('foo', 'bar'));  // foo bar
    console.log(classNames({ foo: true }, { bar: false }));  // foo
    console.log(classNames(null, false, 'bar', undefined, 0, 1, {baz: null}, ""));  // bar 1

    const {loading} = this.state;
    return (
      <button
        onClick={this.startLoading}
        className={classNames(cx("button", { loading })}
        {...this.props}
      />
    );
  }

  startLoading = () => {
    this.setState({
      loading: true,
    });
    setTimeout(() => {
      this.setState({
        loading: false,
      });
    }, 1000);
  };
}

export default Button;

/* src/components/Button.module.css */

.button {
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;
}
. loading {
  border: 2px solid grey;
  color: grey;
}