Question

我按照此link中的步骤更改了背景颜色材料-ui - ＆gt;通过更改主题来Date Picker对话框。更改主题改变了背景颜色，但它没有改变OK和CANCEL按钮的颜色。如何改变OK和CANCEL按钮的颜色？

Answer 1

您可以使用两个选项来自定义“确定”和“取消”按钮的颜色。

（更简单）如果您对应用程序中的所有平面按钮都使用相同的自定义颜色，并希望在日期选择器按钮上使用，那么您只需添加
```
flatButton: {
    primaryTextColor: purple500, // Whatever color you want.
}
```
转到您getMuiTheme()来电的对象。

如果您只是在这种情况下自定义按钮颜色，并希望应用程序中的其他Flat Buttons采用主题颜色，那么您需要在之前自定义muiTheme使用DatePicker。

因此，如果我们想要将所有平面按钮都设为cyan500，那么我们将在我们的主要设置

const mainMuiTheme = getMuiTheme({
    flatButton: { primaryTextColor: cyan500 }
})

const WrapperWithMainThemeProvider = (props) => {
    return (
        <MuiThemeProvider muiTheme={mainMuiTheme}>
            <MyDatePicker />
        </MuiThemeProvider>
    )
}

然后，如果想要自定义DatePicker中的按钮，那么我们就会在自定义组件中执行此操作。

class MyDatePicker extends React.class {
    render() {
        const muiTheme = getMuiTheme({
            ...this.context.muiTheme,
            flatButton: {
                primaryTextColor: purple500,
            }
        })

        // Customize the muiTheme, and pass it down in a new MuiThemeProvider.
        // Only Flat Buttons that are children of this component 
        // will have the new color.
        return (
            <MuiThemeProvider muiTheme={muiTheme}>
                <DatePicker />
            </MuiThemeProvider>
        )
    }
}

MyDatePicker.contextTypes = {
    muiTheme: React.PropTypes.object.isRequired
}

Answer 2

Material-UI在datepicker或任何对话框中使用Flatbutton作为默认值。这意味着你在datepicker上看到的OK / CANCEL按钮只不过是一个平板按钮。因此，要将背景颜色应用于日期选择器的“确定/取消”按钮，您必须使用颜色而不是primaryTextColor。扁平按钮的颜色属性确实会改变按钮背景颜色。请查看下面的示例和Screenshot here

import DatePicker from 'material-ui/DatePicker';

const mainMuiTheme = getMuiTheme({
flatButton: { color: '#333' }
})

const WrapperWithMainThemeProvider = (props) => {
return (
    <MuiThemeProvider muiTheme={mainMuiTheme}>
        <DatePicker
          floatingLabelText="Date Of Birth" 
          hintText="Select Date Of Birth" 
          container="inline" 
          locale="en-US" 
          firstDayOfWeek={0} 
          autoOk={true} 
          value={this.state.dob} 
          onChange={this.changeDateOfBirth} 
          defaultDate={this.state.dateYesterday}
      >
      </DatePicker>
    </MuiThemeProvider>
)
}

以下是Material-UI期望FlatButton的muiTheme样式。

 flatButton: {
  color: transparent,
  buttonFilterColor: '#999999',
  disabledTextColor: fade(palette.textColor, 0.3),
  textColor: palette.textColor,
  primaryTextColor: palette.primary1Color,
  secondaryTextColor: palette.accent1Color,
  fontSize: typography.fontStyleButtonFontSize,
  fontWeight: typography.fontWeightMedium,
}

有关每种材质-UI组件的muiTheme样式的更多信息，请检查以下链接https://github.com/mui-org/material-ui/blob/master/src/styles/getMuiTheme.js

我对此进行了测试，它对我有用。希望这个答案有用。

无法样式材料-ui日期选择器确定/取消按钮

2 个答案: