MUI에서 체크박스의 색상을 커스터마이즈하려면 어떻게 해야 합니까?

MUI에서 체크박스의 색상을 커스터마이즈하려면 어떻게 해야 합니까?

프로젝트에서 MUI를 사용하고 있으며,Checkbox의 범위 내에서div검은 바탕에.근데 안 좋아 보이는 건Checkbox검정색도 있어요.의 색상을 변경하려면 어떻게 해야 합니까?Checkbox검정색에서 다른 색상으로요?

방법은 다음과 같습니다.

 <FormControlLabel  
                control={
                  <Checkbox
                    checked={cryon}
                    onChange={this.handleChange('cryon')}
                    style ={{
                      color: "#00e676",
                    }}
                    value="cryon"
                  />
                }
                label={<Typography variant="h6" style={{ color: '#2979ff' }}>Work</Typography>}
              />

를 사용해야 합니다.iconStyle단, 체크박스아이콘은 SVG 이미지이기 때문에 색상을 설정할 필요가 있습니다.fill대신color:

https://jsfiddle.net/27Lmaz48/1/

<Checkbox label='My checkbox' 
  labelStyle={{color: 'white'}}
  iconStyle={{fill: 'white'}}
/>

오래된 질문이지만 재료 1.2를 사용하는 사용자를 위한 질문입니다.

iconStyle이 작동하지 않습니다.

그러나 기존 테마를 덮어쓰고 '체크박스' 컴포넌트를 새 테마로 감싸서 이 작업을 수행했습니다.

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



const checkBoxStyles = theme => ({
    root: {
      '&$checked': {
        color: '#3D70B2',
      },
    },
    checked: {},
   })

const CustomCheckbox = withStyles(checkBoxStyles)(Checkbox);

이제 렌더링 기능에서 "CustomCheckbox" 구성요소를 사용할 수 있습니다.

이 체크박스를 켜면 지정한 색상이 됩니다.

재료 UI 테마를 사용할 수 있습니다.

const theme = createMuiTheme({
  overrides: {
    MuiCheckbox: {
      colorSecondary: {
        color: '#custom color',
        '&$checked': {
          color: '#custom color',
        },
      },
    },
  },
});

여기서부터 맡다

나는 루트 추가 및 체크 클래스로 해결된다.

const styles = () => ({
  root: {
    "&$checked": {
      color: "rgba(0, 0, 0, 0.54)"
    }
  },
  checked: {}
})

체크박스의 클래스 안에 전달한다.

<Checkbox
          checked={checked}
          classes={{
            root: classes.root,
            checked: classes.checked
          }}
          onChange={handleCheckBox}
        />

이것이 다른 사람들에게 도움이 되기를 바란다

두 가지 방법이 있을 수 있습니다.

1. "로컬"

Check Box에는 소품이 있습니다.labelStyle그리고.iconStyle. 우선 조정부터 시작할 수 있을 것 같습니다.

<Checkbox
  label="Custom icon"
  labelStyle={{color: 'white'}}
  iconStyle={{color: 'white'}}
/>

충분한지 모르겠으니 Checkbox의 다른 "Style" 소품을 가지고 놀아야 할 것 같습니다.이름에 "스타일"이 있는 모든 항목을 체크 아웃합니다.

2. 테마 작성

체크박스에만 영향을 주는 몇 가지 테마 설정을 할 수 있습니다.

사용할 수 있습니다.storybook-addon-material-ui데모 페이지를 클릭하여 테마를 만들고 다운로드합니다.

저는 테이블 헤더 체크박스를 변경하기만 하면 되는데, 이 체크박스는 저에게 효과가 있었습니다.

.thsvg svg{
  fill: white !important;
}


<TableHeader
   className="thsvg"
    displaySelectAll={true}
    adjustForCheckbox={true}
    enableSelectAll={true}>
  <TableRow>     
    <TableHeaderColumn>Name</TableHeaderColumn>
  </TableRow>
</TableHeader>

MUI v5 에서는, 다음의 2개의 바람직한 변경 방법이 있습니다.Checkbox색상:

sx 받침대

이는 단발적인 스타일로 빠르게 설정할 수 있지만 특정 스타일에만 적용됩니다.Checkbox:

import Checkbox, { checkboxClasses } from "@mui/material/Checkbox";

<Checkbox
  {...props}
  sx={{
    [`&, &.${checkboxClasses.checked}`]: {
      color: 'magenta',
    },
  }}
/>

color받침대

자세한 내용은 이 답변을 참조하십시오.기본적으로는color일부 컴포넌트(예:Button,Checkbox,Radio,...)는 오브젝트의 색상 중 하나여야 합니다.이 색상은 취향에 따라 확장할 수 있습니다.

import { pink, yellow } from "@mui/material/colors";
import Checkbox, { checkboxClasses } from "@mui/material/Checkbox";
import { createTheme, ThemeProvider } from "@mui/material/styles";

const { palette } = createTheme();
const theme = createTheme({
  palette: {
    pinky: palette.augmentColor({ color: pink }),
    summer: palette.augmentColor({ color: yellow })
  }
});

<ThemeProvider theme={theme}>
  {/* pre-defined color */}
  <Checkbox />
  <Checkbox color="secondary" />
  <Checkbox color="success" />
  <Checkbox color="default" />
  {/* custom color */}
  <Checkbox color="pinky" />
  <Checkbox color="summer" />
  <Checkbox
</ThemeProvider>

라이브 데모

관련 답변

• 커스텀 MUI 팔레트 색상을 추가하는 방법

checkBox에는 color라는 속성이 있으며 다음과 같은 기본값, 기본 또는 보조 값을 가질 수 있습니다.

 <Checkbox
   onChange={doSth}
   value="checkedIncomplete"
   color="primary"
  />

primary의 경우 다음과 같은 클래스 CSS를 덮어쓰는 것으로, 간단하게 원색과 secondary 색상을 변경할 수 있습니다..MuiCheckbox-colorPrimarysecondary의 경우는 다음과 같습니다..MuiCheckbox-colorSecondary

CSS에서 할 수 ..MuiCheckbox-colorPrimary { color : 'yourColor'}

재료의 4.1의 정의colorsyslog =syslog =syslog =syslog 의 with"primary"Checkbox

<Checkbox color="primary"...>

덮어씁니다.material-ui 스타일링을 .합니다.javascript 코드에 합니다.Checkbox.

.MuiCheckbox-colorPrimary.Mui-checked {
color: #e82997 !important;
}

MUI 5 테마:

import { checkboxClasses } from '@mui/material/Checkbox';

export const muiTheme = createTheme({
    components: {
        MuiCheckbox: {
            styleOverrides: {
                root: {
                    color: 'blue',
                    [`&.${checkboxClasses.checked}`]: {
                        color: 'blue',
                    },
                },
            },
        },
    },
});

되지 않은 할 수 .를 들어, 체크박스의 아이콘은 다음과 같습니다.<Checkbox checkedIcon={<CustomIcon style={{color:'red'}}/>} icon={<CustomIcon/>} inputProps={{ 'aria-label': 'decorative checkbox' }} {...props} />

은 이쪽입니다.
labelStyle ★★★★★★★★★★★★★★★★★」iconStyle
나중에 색상을 변경할 수 있도록 하려면 다음 작업을 수행합니다.

const useStyles = makeStyles<Theme, {color: string}, "root">({
    root: {
        color: (props: {color: string}) => props.color,
    },
})

export default function ColoredCheckbox() {
     const styles = useStyles({color: "#whatevercoloryouwant"})
     return <Checkbox color="default" className={styles.root} />
}

언급URL : https://stackoverflow.com/questions/41332701/how-can-i-customize-the-color-of-a-checkbox-in-mui