Material UI에서 Props 전달로 색상을 지정할 수 있는 CustomButton 만들기

Material UI 버튼에는 기본적으로 다음과 같은 레퍼토리가 있지만

기본값은 Bootstrap에 비해 색상 수가 적습니다.
Material UI에는 모처럼 풍부한.

공식 문서에는 컬러 팔레트 의 만드는 방법이 설명되어 있지만 고정 색을 위해 어떻게든 색 지정할 수 있는 범용적인 컴퍼넌트로 하려고 시도했는데 컴파일 에러의 폭풍

이것을

const ColorButton = withStyles(theme => ({
  root: {
    color: theme.palette.getContrastText(purple[500]),
    backgroundColor: purple[500],
    '&:hover': {
      backgroundColor: purple[700],
    },
  },
}))(Button);

이렇게하려고하면 NG였습니다.

const ColorButton = (props)=> withStyles(theme => ({
  root: {
    color: theme.palette.getContrastText(props.themeColor[500]),
    backgroundColor: props.themeColor[500],
    '&:hover': {
      backgroundColor: props.themeColor[700],
    },
  },
}))(Button);

다양한 재작성을 시도했지만 작동하지 않습니다.

다른 테마 지정 방법을 다시 작성해 보았습니다.

const theme = createMuiTheme({
  palette: {
    primary: green,
  },
});

function CustomizedButtons() {
  return (
    <>
      <ThemeProvider theme={theme}>
        <Button variant="contained" color="primary">
          Theme Provider
        </Button>
      </ThemeProvider>
    </>
  );
}

↓

const CustomButton = (props) => (
  <ThemeProvider theme={createMuiTheme({palette:{primary:props.themeColor}})}>
    <Button variant="contained" color="primary" className={props.className}>
      {props.label}
    </Button>
  </ThemeProvider>
)

function App() {
  return (
    <>
      <CustomButton label="Hello" themeColor={purple} />
    </>
  );
}

잘 갔다.
Customized buttons

게 보였지만

다른 색을 나란히 보았는데

function App() {
  return (
    <>
      <CustomButton label="Hello" themeColor={purple} />
      <CustomButton label="Hello" themeColor={green} />
    </>
  );
}

KONOZAMA☆


다시 withStyles로 하는 노선에
이전 재 작성 시행 착오로 다음은

const ColorButton = withStyles(theme => ({
  root: {
    color: theme.palette.getContrastText(purple[500]),
    backgroundColor: purple[500],
    '&:hover': {
      backgroundColor: purple[700],
    },
  },
}))(Button);

이렇게 다시 쓰여지는 곳까지는 알 수 있습니다.
withStyles(customTheme)의 반환값은 컴퍼넌트를 인수로 하는 함수
withStyles (customTheme) (Button)의 반환 값은 구성 요소 자체입니다.
뭔가 한 걸음 더 빠르다.

  const customTheme = theme => ({
    root: {
      color: theme.palette.getContrastText(purple[500]),
      backgroundColor: purple[500],
      '&:hover': {
        backgroundColor: purple[700],
      },
    },
  })
  const CustomButton = withStyles(customTheme)(Button)

다시 withStyles에 props를 전달할 방법이 없거나 Qiita에서 찾고 있다면

… 있었다


없잖아

> const withStylesProps = styles => Component => props => {
>   const Comp = withStyles(styles(props))(Component);
>   return <Comp {...props} />;
> };

jsx는 이렇게 쓰는지 ...

그렇다고 해서 원했던 방법은 이런 느낌이었습니다(보기 쉬움 때문에 margin 관련 생략)

import React from 'react';
import Button from '@material-ui/core/Button';
import { withStyles } from '@material-ui/core/styles';
import { purple, green, red, blue } from '@material-ui/core/colors';

const CustomButton = (props) => {
  const customTheme = theme => ({
    root: {
      color: theme.palette.getContrastText(props.themeColor[500]),
      backgroundColor: props.themeColor[500],
      '&:hover': {
        backgroundColor: props.themeColor[700],
      },
    },
  })
  const ComponentName = withStyles(customTheme)(Button)
  return <ComponentName {...props} />
}

function App() {
  return (
    <>
      <CustomButton themeColor={green}>Hello</CustomButton>
      <CustomButton themeColor={purple}>Hello</CustomButton>
      <CustomButton themeColor={red}>Hello</CustomButton>
      <CustomButton themeColor={blue}>Hello</CustomButton>
    </>
  );
}

export default App;

외형은 이런 느낌
Material-UI의 withStyles에서 지정하는 stylesCreator에서 부모로부터 props로 받은 값을 동적으로 적응시키는 HOC