Material-UI(α판)로 CSS in JS!

Material-UI α판

이 기사 계속해서 React.js용 머티리얼 디자인 Material-UI에 대해 α브랜치(v1.0-alphe 14)의 기능을 살펴보겠습니다.
현재 v0.18에서는 CSS가 LESS에 의해 구축되고 있지만, v1.0에서는 CSS in JS의 구조가 제공되는 것 같습니다. 별도 CSS-Module을 넣거나 Webpack으로 설정할 필요도 없기 때문에 간단하게 이용할 수 있을 것 같습니다.
α 버전을 설치하려면 npm @next을 지정하십시오.

$ npm install --save material-ui@next

CSSinJS in Material-UI

Material-UI CSSinJS는 createStyleSheet와 withStyles라는 두 가지 API를 사용합니다. createStyleSheet에서 DOM에 적용할 스타일을 생성하고 withStyles에서 스타일을 적용한 DOM을 생성하는 단계입니다.

createStyleSheet

createStyleSheet는 첫 번째 인수에 이름, 두 번째 인수에 스타일 객체 또는 스타일 객체를 반환하는 함수를 지정합니다. 첫 번째 인수는 단순히 디버깅 목적으로 사용되는 것 같습니다. 제 2 인수에 건네주는 함수의 인수 theme에 대해서는 나중에 설명합니다.

import { createStyleSheet } from 'material-ui/styles';

let myStyleSheet = createStyleSheet("myStyle", (theme) => {
    root : {
        color: '#CCC',
        width: '500px',
    },
});

withStyle

withStyle의 첫 번째 인수는 이전에 생성 된 스타일을 지정합니다. 반환값은 고층 컴퍼넌트(higher-order component)입니다. 고층 컴포넌트의 올바른 의미는 잘 모르겠지만, 고층 컴포넌트에 React 컴포넌트(DOM)를 넘겨주면 이전 스타일이 적용되는 새로운 DOM이 생성됩니다.
스타일이 적용되는 구성 요소에는 props를 통해 classes 속성이 전달됩니다. className에 클래스의 속성을 지정하면 해당 요소에 스타일이 적용됩니다.

import { withStyles } from 'material-ui/styles';

// いつものReactコンポーネント（ただしpropsにclassesが渡される)
const MyApp = (props) = (
    <div className={props.classes.root}> //渡されたclassesを適用
       Hello World
    </div>
)

// スタイルを適用したコンポーネント
let StyledMyApp = withStyles(myStyleSheet)(MyApp);

// スタイル付きコンポーネントは<MuiThemeProvider>の子要素にする
ReactDOM.render(<MuiThemeProvider><StyledMyApp /></MuiThemeProvider>,
 document.querySelector('#app'));

themeProvider

애플리케이션 전체에서 디자인을 통일하기 위해 테마(theme)의 개념이 있는 것 같습니다. 테마는 createMuiTheme 로 작성해, MuiThemeProvider 의 속성치로서 건네주는 것으로 적용할 수 있습니다.
위의 cteateStyleSheet 두 번째 인수의 함수에 전달되는 theme는 MuiThemeProvider에 적용됩니다. theme 객체의 속성이 많이 있으므로 여기을 참조하십시오. 색상은 여기을 참조하십시오.
사용법은 예를 들면 이런 느낌.

import { purple, green, red } from 'material-ui/styles/colors';

// 独自テーマを作って
const theme = createMuiTheme({
  status: {
    danger: 'orange',
  },
});

// 適用する
ReactDOM.render(<MuiThemeProvider theme={theme}> ...

다만, 실제로는 그다지 테마를 작성하는 일은 없고, 테마는 그대로 이용해, 자작 컴퍼넌트에 그 테마로부터 값(색이나 폰트등)을 적용한다, 라고 하는 것이 메인이 될까라고 생각합니다. 예를 들면 이런 느낌으로.

let myStyleSheet = createStyleSheet("myStyle", (theme) => {
    root : {
       backgroundColor: theme.palette.primary[200],
       color: theme.palette.getContrastText(theme.palette.primary[200]),
       padding: `${theme.spacing.unit}px`,  //余白もテーマで統一できる
    },
});

위의 예와 같이 palette에 대해 getContrastText를 사용하면 배경색에 적합한 텍스트 색상이 선택됩니다. 이것으로 색환 등 더 이상 생각하지 않아도 좋네요.

해봤어

적당히 테마를 만지거나 해 보았습니다. 아무리 프레임워크가 확실히 하고 있어도, 머티리얼 디자인에 의하지 않고 적당하게 값을 지정해 버렸으므로, 전혀 이케 없네요. .



Material-UI를 이용하는 것으로, 외형에 관한 여러가지 기능이 (거의) 올인원으로 제공되기 때문에, 나와 같은 초학자에게는 추천인가라고 생각합니다.