CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Profer
Profer

Reputation: 643

How to set material ui time picker dilog styles

I am integrating material ui time picker

I need to change the color of time

enter image description here

You can see in the image. I need to change the color of 11:30 pm. And also I need to change width and height of the dilog box.

I tried this but didn't work

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#efbb40'
    }
  },
  typography: {
    useNextVariants: true,
    suppressDeprecationWarnings: true
  }
})

I searched a lot but couldn't able do it.

Please help!!!

Upvotes: 1

Views: 491

Answers (1)

Root
Root

Reputation: 2361

I have read the original code of time picker in node_modules.The style in it is defined different from material-ui.So I offer an option to override them here.

First,copy the code in node_modules/material-ui-time-picker/lib/TimePicker.js to a TimePicker.js.And remember to change the following two part.

var _Clock = require('material-ui-time-picker/lib/Clock');
var _util = require('material-ui-time-picker/lib/util');

Second,import the TimePicker from your TimePicker.js not from node_modules

import TimePicker from './TimePicker'

                <Button
                    onClick={() => this.setState({ open: true })}
                >
                    Open time picker
                </Button>
                <Dialog
                    maxWidth='xs'
                    open={this.state.open}
                >
                    <TimePicker/>
                    <DialogActions>
                        <Button onClick={() => this.setState({ open: false })} color='primary'>
                            Cancel
                        </Button>
                        <Button onClick={() => this.setState({ open: false })} color='primary'>
                            Ok
                        </Button>
                    </DialogActions>
                </Dialog>

Then, you will get the same TimePicker now.And you can feel free to change the style in TimePicker.js

Upvotes: 1

Related Questions