React Material UI 적용

npm create-react-app my-app
cd my-app
npm start

npm i node-sass

//App.css -> App.scss
//scss 파일로 변경후 불러와서 적용
import './App.scss';

//songs.scss
$themeColor : blue;
p{
    color: $themeColor;
}

@import 'songs';

npm install @material-ui/core
yarn add @material-ui/core

//개별 import
import Button from '@material-ui/core/Button';
import Checkbox from '@material-ui/core/Checkbox';

//한 곳에서 import
import {Button, Checkbox, Radio} from '@material-ui/core';

contained primary Primary contained Secondary Secondary

//color 미설정시 기본은 secondary 컬러로 적용됨

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import indigo from '@material-ui/core/colors/indigo';
import pink from '@material-ui/core/colors/pink';
import red from '@material-ui/core/colors/red';

const theme = createMuiTheme({
    palette: {
      primary: indigo,
      secondary: pink,
      error: red,
      contrastThreshold: 3,
      tonalOffset: 0.2,
    },
  });


ReactDOM.render(<MuiThemeProvider theme={theme}><App /></MuiThemeProvider>, document.getElementById('root'));

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^3.9.2",
    "node-sass": "^4.11.0",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-scripts": "2.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}