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;
}
}
라이브 데모
관련 답변
저는 이 스레드의 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
컴포넌트를 「」를 설정합니다.color
Button
를 「」로 설정합니다.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
'programing' 카테고리의 다른 글
리액트 쓸까?Pure Component는 어디에나 있습니까? (0) | 2023.03.27 |
---|---|
Woocommerce, "카트에 추가" 메시지 편집 방법 (0) | 2023.03.27 |
지시어를 사용하여 AngularJS 브라우저 자동 채우기 회피책 (0) | 2023.03.27 |
Angular UI 부트스트랩 팝오버 바깥쪽을 클릭할 때 숨기기 (0) | 2023.03.27 |
아이콘 글꼴을 CSS 속성의 배경으로 설정 (0) | 2023.03.27 |