材质ui日期时间选择器主题

时间:2020-05-07 14:42:18

标签: reactjs material-ui

材料ui日期选择器正在使用默认主题,而不是使用我的自定义主题。如何更正此问题并使选择器使用我的自定义主题,而不是默认主题。

代码沙箱code

1 个答案:

答案 0 :(得分:2)

请输入您在问题中尝试过的所有内容。 无论如何,您可以在index.js文件中定义自己的主题。

const theme = createMuiTheme({
    palette: {
        primary: {
            main: "#008080"
        },
        secondary: {
            main: '#4caf50',
        },

    }
})

ReactDOM.render(
        <MuiThemeProvider theme={theme}>
            <App />
        </MuiThemeProvider>,
    document.getElementById('root')
);

现在它将选择您在此处拥有的主题。

这是像我说的那样工作的确切代码。

<MuiPickersUtilsProvider
  libInstance={moment}
  utils={MomentUtils}>
  <KeyboardDateTimePicker
     autoOk
     fullWidth
     size="small"
     animateYearScrolling
     inputVariant="outlined"
     value={start_time}
     keyboardIcon={<DateRangeIcon color="secondary" />}
     placeholder={showStartTime ? "" : "Test not scheduled"}
     onChange={handleDateChange} />
</MuiPickersUtilsProvider>