재질 버튼에서 별도로 버튼을 올려 놓고 평면 버튼을 누르는 방법

Question

반응을 사용하여 재질 UI에 사용자 정의 테마를 만들려고합니다.

palette: { 
primary1Color: pink500, 
primary2Color: pink500, 
primary3Color: grey300, 
accent1Color: grey500, 
accent2Color: grey500, 
accent3Color: grey300, 
textColor: darkBlack, 
alternateTextColor: white, 
canvasColor: white, 
borderColor: grey300, 
disabledColor: fade(grey700, point3), 
pickerHeaderColor: cyan500, 
clockCircleColor: fade(darkBlack, point7), 
shadowColor: fullBlack 

}

팔레트는이 같은 것입니다. flatbuttons 잘 작동하지만 제기 된 단추는 accent1Color : grey500, 배경으로 복용하고 있습니다. 내가 싫어하고 같은 시간에 "labelStyle"과 "backgroundColor"와 같은 소품을 사용하지 않으려 고합니다. 테마 옵션을 추가로 만들 수있는 다른 방법이 있습니까? 여기서는 단지 secondary = {true}를 추가해야하며 grey50으로 backgroundColor를 사용하고 grey900으로 labelStyle을 사용합니다.

도움이 될 것입니다. 도움이되기를 바랍니다.

Answer 1

이와 비슷한 것을 만들 수 있습니다. 이 메서드를 사용하여 각 구성 요소에서 사용하는 색을 재정의 할 수 있습니다. 내가 예를 들어 어디서나 primary1Color을 사용했음을 주목하십시오.

const palette = { 
    primary1Color: '#ffc20e', 
    primary2Color: '#e30413' 
} 

const theme = { 
    palette: palette, 
    raisedButton: { 
    color: palette.primary1Color, 
    textColor: palette.primary1Color, 
    primaryColor: palette.primary1Color, 
    primaryTextColor: palette.primary1Color, 
    secondaryColor: palette.primary1Color, 
    secondaryTextColor: palette.primary1Color, 
    disabledColor: palette.primary1Color, 
    disabledTextColor: palette.primary1Color, 
    } 
} 

<MuiThemeProvider muiTheme={getMuiTheme(theme)}> 
    <div className='appContainer'> 
     {children} 
    </div> 
</MuiThemeProvider>