MUI 커스터마이즈 버튼 색상?

MUI 커스터마이즈 버튼 색상?

다음(v1) MUI에서 버튼 색상을 수정하는 데 어려움을 겪고 있습니다.

어떻게 하면 muitheme이 부트스트랩과 비슷하게 행동하도록 설정할 수 있을까요? 그러면 빨간색은 "btn-danger", 녹색은 "btn-success"를 사용할 수 있을까요?

는 커스텀으로 했다.className제대로 작동하지 않고(색상은 변하지 않습니다) 반복하는 것 같습니다.떤떤옵 션션?

이거 드셔보세요

<Button
    style={{
        borderRadius: 35,
        backgroundColor: "#21b6ae",
        padding: "18px 36px",
        fontSize: "18px"
    }}
    variant="contained"
    >
    Submit
</Button>

MUI v5에서는 MUI에 맞게 테마를 커스터마이즈할 수 있습니다.Button·후드 아래에서도 원색과 세컨더리 색상이 동일하게 작성됩니다.

const { palette } = createTheme();
const { augmentColor } = palette;
const createColor = (mainColor) => augmentColor({ color: { main: mainColor } });
const theme = createTheme({
  palette: {
    anger: createColor('#F40B27'),
    apple: createColor('#5DBA40'),
    steelBlue: createColor('#5C76B7'),
    violet: createColor('#BC00A3'),
  },
});

사용.

<Button color="anger" variant="contained">
  anger
</Button>
<Button color="apple" variant="contained">
  apple
</Button>
<Button color="steelBlue" variant="contained">
  steelBlue
</Button>
<Button color="violet" variant="contained">
  violet
</Button>

타이프 스크립트를 사용하고 있는 경우는, 방금 정의한 색상의 타입도 추가할 필요가 있습니다.

declare module '@mui/material/styles' {
  interface CustomPalette {
    anger: PaletteColorOptions;
    apple: PaletteColorOptions;
    steelBlue: PaletteColorOptions;
    violet: PaletteColorOptions;
  }
  interface Palette extends CustomPalette {}
  interface PaletteOptions extends CustomPalette {}
}

declare module '@mui/material/Button' {
  interface ButtonPropsColorOverrides {
    anger: true;
    apple: true;
    steelBlue: true;
    violet: true;
  }
}

라이브 데모

관련 답변

• 커스텀 MUI 팔레트 색상을 추가하는 방법
• MUI에서 원색 및 보조 색상 변경

저는 이 스레드의 Brendans 답변을 사용하여 이 솔루션을 생각해 냈습니다.그것이 비슷한 상황에 있는 누군가에게 도움이 되기를 바랍니다.

import React, { Component } from 'react'
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'
import Button from 'material-ui/Button'
import { red, blue } from 'material-ui/colors'

const redTheme = createMuiTheme({ palette: { primary: red } })
const blueTheme = createMuiTheme({ palette: { primary: blue } })

class Buttons extends Component {
  render = () => (
    <div className="ledger-actions-module">
      <MuiThemeProvider theme={redTheme}>
        <Button color="primary" variant="raised">
          Delete
        </Button>
      </MuiThemeProvider>
      <MuiThemeProvider theme={blueTheme}>
        <Button color="primary" variant="raised">
          Update
        </Button>
      </MuiThemeProvider>
    </div>
  )
}

베이글프의 대답과 그 밖에 고려해야 할 것이 있다.

첫째, material-ui@next v1의 Button 컴포넌트에서는 '오류'가 지원되지 않습니다.컬러 프로펠러에서는 '기본', '상속', '기본' 및 '보조'만 허용됩니다.

지금까지 제가 발견한 가장 쉬운 접근법은 다음과 같습니다.먼저 가장 일반적인 두 가지 테마 색상을 선택하여 앱의 루트에 배치합니다.

import React from 'react';
import { Component } from './Component.js'
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';

const theme = createMuiTheme({
  palette: {
    primary: 'purple',
    secondary: 'green',
    error: 'red',
  },
});

export class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <Component />
        ...
      </MuiThemeProvider>
    );
  }
}

그런 다음 컴포넌트에서 원하는 색상으로 테마를 선택합니다.

import React from 'react';
import Button from 'material-ui/Button';

export const Component = (props) => (
  <div>
    <Button variant="fab" color="primary">
      I am purple, click me!
    </Button>
  </div>
)

세 번째와 네 번째 색상이 필요한 경우 App.js에서와 마찬가지로 새로운 팔레트로 Component.js를 내보낼 수 있습니다.

이것이 내가 찾은 유일한 솔루션으로서 어두운 호버 효과를 유지할 수 있다(어느 것도 아니다).공식 오버라이드 예는 기능 호버를 유지합니다).Button을 호출할 때 간단하게 새로운 테마 색상을 넣을 수 있는 방법을 찾고 싶지만, 현재로서는 이것이 가장 간단한 방법입니다.

편집: 새로운 방법은 스타일 컴포넌트와 material-ui 버튼 베이스를 사용하여 Custom Button 컴포넌트를 작성하는 것입니다.또한 MuiTheme Provider와 함께 앱의 루트에 스타일 컴포넌트 테마 프로바이더를 배치합니다.이를 통해 스타일링된 컴포넌트의 추가 테마 색상에 쉽게 접근할 수 있습니다.더 많은 테마 프로바이더를 Import하거나 드롭하지 않아도 됩니다.Button의 , 「 Button」, 「Custom Button」을 .theme프로포트.styled(ButtonBase)자세한 내용은 스타일 컴포넌트 문서를 참조해 주세요.

이것을 시험해 보세요.

import * as React from 'react';
import Button, { ButtonProps } from "@material-ui/core/Button";
import { Theme } from '@material-ui/core';
import { withStyles } from '@material-ui/styles';

const styles: (theme: Theme) => any = (theme) => {
    return {
        root:{
            backgroundColor: theme.palette.error.main,
            color: theme.palette.error.contrastText,
            "&:hover":{
                backgroundColor: theme.palette.error.dark
            },
            "&:disabled":{
                backgroundColor: theme.palette.error.light
            }
        }
    };
};

export const ButtonContainedError = withStyles(styles)((props: ButtonProps) => {
    const { className, ...rest } = props;
    const classes = props.classes||{};
    return <Button {...props} className={`${className} ${classes.root}`} variant="contained" />
});

이것으로 Button Encled Error를 어디서나 사용할 수 있게 되었습니다.

그리고 그것은 당신의 주제와 일치합니다.

다음은 typescript의 구현 예를 제시하겠습니다.

import React from "react";
import { createStyles, Theme, makeStyles } from "@material-ui/core/styles";
import capitalize from "lodash/capitalize";

import MuiButton, {
  ButtonProps as MuiButtonProps
} from "@material-ui/core/Button";

export type ColorTypes =
  | "primary"
  | "secondary"
  | "error"
  | "success"
  | "warning"
  | "default"
  | "inherit"
  | "info";

type ButtonProps = { color: ColorTypes } & Omit<MuiButtonProps, "color">;

const useStyles = makeStyles<Theme>(theme =>
  createStyles({
    outlinedSuccess: {
      borderColor: theme.palette.success.main,
      color: theme.palette.success.main
    },
    outlinedError: {
      borderColor: theme.palette.error.main,
      color: theme.palette.error.main
    },
    outlinedWarning: {
      borderColor: theme.palette.warning.main,
      color: theme.palette.warning.main
    },
    outlinedInfo: {
      borderColor: theme.palette.info.main,
      color: theme.palette.info.main
    },
    containedSuccess: {
      backgroundColor: theme.palette.success.main,
      color: theme.palette.success.contrastText,
      "&:hover": {
        backgroundColor: theme.palette.success.dark
      }
    },
    containedError: {
      backgroundColor: theme.palette.error.main,
      color: theme.palette.error.contrastText,
      "&:hover": {
        backgroundColor: theme.palette.error.dark
      }
    },
    containedWarning: {
      backgroundColor: theme.palette.warning.main,
      color: theme.palette.warning.contrastText,
      "&:hover": {
        backgroundColor: theme.palette.warning.dark
      }
    },
    containedInfo: {
      backgroundColor: theme.palette.info.main,
      color: theme.palette.info.contrastText,
      "&:hover": {
        backgroundColor: theme.palette.info.dark
      }
    }
  })
);

const Button: React.FC<ButtonProps> = ({ children, color, ...props }) => {
  const classes = useStyles();
  const className = classes?.[`${props.variant}${capitalize(color)}`];
  const colorProp =
    ["default", "inherit", "primary", "secondary"].indexOf(color) > -1
      ? (color as "default" | "inherit" | "primary" | "secondary")
      : undefined;

  return (
    <MuiButton {...props} color={colorProp} className={className}>
      {children}
    </MuiButton>
  );
};

Button.displayName = "Button";

export default Button;

으로 할 수 <Button variant="contained" color="success"> free 를 합니다.

업데이트:

Material UI V5에서는 훨씬 더 우아한 방법으로 이를 달성할 수 있습니다.팔레트에 색상을 추가하기만 하면 버튼이 자동으로 지원됩니다!https://mui.com/customization/palette/ #snew-snew-snew-snow-snow-snow-snow-snow-snow-snow-

하시면 됩니다.theme.palette.getContrastText()배경색 값을 기준으로 올바른 텍스트 색상을 계산합니다.

import { Button, makeStyles } from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  deleteButton: {
    // to make a red delete button
    color: theme.palette.getContrastText(theme.palette.error.main),
    background: theme.palette.error.main,
  }
}));

export const DeleteButton = () => {
  const classes = useStyles();
  return (
    <Button className={classes.deleteButton}>Delete</Button>
  );
}

먼저 npm install @material-ui/styles를 설치하고 재료 설명서에 따라 스타일을 적용합니다.리액트 클래스 컴포넌트에 대해서는 다음 코드를 사용할 수 있습니다.

import React, {Component} from "react";
import { styled } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

const MyButton = styled(Button)({
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
});
class AprinClass extends Component {
    render() {
        return (
            <MyButton>Styled Components</MyButton>
        )
    }
}
export default AprinClass;

참고문헌에 대한 자세한 내용은 제 블로그를 중간에서 확인해 주세요.https://medium.com/@farbodaprin/how-to-make-a-customable-material-ui-button-a85b6534afe5

해서 만들 수 요.theme의 팔레트 대해 된 팔레트 intentions secondary, error) 으로 (primary, secondary, error)를 합니다.color을 대다<Button>사용할 수 있습니다.이 예에서 는 다음과 같습니다.

편집: Brendan의 답변은 여기서 옳습니다.error.Button에 Button는 "컴포넌트에 이치에 하므로 "이 컴포넌트에 이치에 맞다"는 의미만 합니다.primary ★★★★★★★★★★★★★★★★★」secondary여기서 일할 수 있을 거야

문서(여기서 조금 생략):

const theme = createMuiTheme({
  palette: {
    primary: purple,
    secondary: red
  }
});

function Palette() {
  return (
    <MuiThemeProvider theme={theme}>
      <div>
        <Button color="primary">{'Primary'}</Button>
        <Button color="secondary">{'Secondary'}</Button>
      </div>
    </MuiThemeProvider>
  );
}

구성 요소에 대한 테마를 만드는 보다 현실적인 예는 Brendan의 답변을 참조하십시오.

단추 색상을 변경하는 가장 쉬운 방법은 "스타일" 속성을 추가하는 것입니다.다음은 제가 만든 녹색 버튼의 예입니다.

import Button from '@material-ui/core/Button';

  <Button 
    variant="contained" 
    color="primary" 
    style={{ backgroundColor: '#357a38' }}
  >
    Run
  </Button>

2022/05년 이후:

공식 문서: 테마에 따라 MUI를 커스터마이즈합니다.및 을 사용해야 합니다.

" " " 를 .primary색깔

import {ThemeProvider, createTheme} from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#000000',
    },
  },
});

그런 다음 앱이나 원하는 곳에ThemeProvider컴포넌트를 「」를 설정합니다.colorButton를 「」로 설정합니다.primary.

function YourApp() {
  // logic omitted

  return (
    <ThemeProvider theme={theme}>
      <YourApp>
        <Button color="primary">Click me</Button>
      </YourApp>
    </ThemeProvider>
  );
}

나는 !중요한 것이 수업에서 효과가 있다는 것을 알게 되었다.(후크 반응)

const styles "...etc..." = (theme: Theme) => ({
    buttonWarning: {
        backgroundColor: theme.palette.warning.dark + '!important'
    }
}))

그러면 버튼에

const classes = styles();

<Button className={classes.buttonWarning}>Hello</Button>

사용: 이 sx 소품을 사용하면 MUI에 대한 이해도가 높아집니다.대부분의 MUI 컴포넌트에서 이러한 소품을 사용합니다.

import {Button} from '@mui/material'

<Button variant="contained" sx={{
    borderRadius: 35,
    backgroundColor: "#21b6ae",
    padding: "18px 36px",
    fontSize: "18px",
    **color:"white"**
}} >
         elevation
    </Button>

'@mui/material/colors'에서 색상을 내보냅니다. (문서)

import { pink } from '@mui/material/colors';

이렇게 사용하다

<Button variant="contained" sx={{ backgroundColor: pink[700] }}>Check</Button>

언급URL : https://stackoverflow.com/questions/46486565/mui-customize-button-color