After following the instructions provided in this resource to modify the background color of material-ui's Date Picker dialog by adjusting the theme, I encountered an issue. Although changing the theme successfully altered the background color, it did not affect the color of the OK and CANCEL buttons. Is there a way to change the color of these buttons?
If you're looking to personalize the color scheme of your OK and Cancel buttons, there are a couple of options available for customization.
(Option 1) If you're comfortable with all flat buttons in your app having the same custom color as your Date Picker buttons, you can easily achieve this by adding
flatButton: {
primaryTextColor: purple500, // Choose your preferred color.
}
to the object when calling getMuiTheme().
(Option 2) If you only wish to customize the button colors for specific cases while maintaining the theme's default color for other Flat Buttons, you'll need to adjust the muiTheme just before using the DatePicker.
For example, if you want all Flat Buttons to display as cyan500, set it up like this:
const customizedTheme = getMuiTheme({
flatButton: { primaryTextColor: cyan500 }
})
const ThemeProviderWrapper = (props) => {
return (
<MuiThemeProvider muiTheme={customizedTheme}>
<MyDatePicker />
</MuiThemeProvider>
)
}
To further customize buttons within the DatePicker, create a custom component:
class MyDatePicker extends React.Component {
render() {
const muiTheme = getMuiTheme({
...this.context.muiTheme,
flatButton: {
primaryTextColor: purple500,
}
})
// Customize the muiTheme and apply it through a new MuiThemeProvider.
// Only Flat Buttons under this component will adopt the new color scheme.
return (
<MuiThemeProvider muiTheme={muiTheme}>
<DatePicker />
</MuiThemeProvider>
)
}
}
MyDatePicker.contextTypes = {
muiTheme: React.PropTypes.object.isRequired
}
When using Material-UI, the flatbutton is the default button style for datepicker and other dialog elements. This means that the OK/CANCEL buttons you see on the datepicker are actually flatbuttons. To change the background color of these buttons, you need to use the color attribute instead of primaryTextColor. By adjusting the color attribute of the flatbutton, you can modify the button's background color. See the example below and 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>
)
}
Below are the expected muiTheme styles for FlatButton by Material-UI.
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,
}
For more information on muiTheme styles for each Material-UI component, refer to the following link https://github.com/mui-org/material-ui/blob/master/src/styles/getMuiTheme.js
I have tested this solution and it worked well for me. I hope this answer proves helpful.
I'm currently working with a material-ui autocomplete element <Autocomplete id="combo-box-demo" autoHighlight openOnFocus autoComplete options={this.state.products} getOptionLabel={option => option.productName} style={{ width: 300 ...
Within my application, there are instances where I need to dim and disable the mouse events for certain div elements based on the component's state - such as when it's loading. My initial approach involved creating a helper function that generate ...
My React component features a Material UI Autocomplete form that is working perfectly, except for one issue - when the user hits ENTER, the input field gets cleared. I simply want to prevent the input field from being cleared when ENTER key is pressed. Des ...
I am looking to utilize hooks within my component that generates a list of checkboxes and allows for independent status updates for each checkbox. To accomplish this, I am currently utilizing useSelector() to retrieve the checkbox data obtained from the U ...
Using the following version: npm view react version # 17.0.2 This is my code snippet: import React from 'react'; import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Grid'; import Image from "material ...
Having an issue with React Select material UI where the dropdown select is not functioning properly. The popup does not open up as expected. I am looking to display react select in a modal dialog box. import MenuItem from "@mui/material/MenuItem" ...
Every time I try to use custom hook return values in my component, I encounter a "Rendered more hooks than during the previous render" error. The structure of the hook is as follows: import { useState, useEffect } from 'react'; import axios fro ...
When the mouse hovers over the two cells highlighted in pink, they turn pink. Is there a way to make the entire grid fill with pink when hovered over, both width and height at 100%? Check out the sandbox here ...
In the Text Field demonstration, I noticed input adornments at the start and end. However, I am looking to have two input adornments at the end specifically. I attempted to add them using endAdornment: {InputAdornment InputAdornment}, but encountered an er ...
Within the Material UI documentation, a demonstration was provided to showcase how one can modify the color of a Radiobutton. const GreenRadio = withStyles({ root: { color: green[400], '&$checked': { color: green[600], }, ...
I've been experimenting with creating a dynamic table in React that allows users to add and delete rows. I need the data entered by the user to be saved, possibly using in-state management so that I can work with it later. Essentially, I'm looki ...
Is there a way to make the mui MenuItem stay sticky to Select while scrolling down? To see the issue in action, check out this codesandbox example https://codesandbox.io/s/quirky-knuth-5hr2dg?file=/Demo.tsx Simply click on the select and start scrolling ...
Exploring the MUI library for the first time, I successfully created a navigation bar that functions properly for one route (Dashboard). However, when attempting to implement it on the candidate route, it collapses as shown in this Screengrab of collapsed ...
I am currently developing a feature that allows users to select an option in the Autocomplete component. In the parent component, I pass these props: const filterDropdownConfig: FilterSelectAutocomplete = { data: scenariosList, label: { className: &apos ...
I am looking for a solution to make the content fit within the browser window without displaying a scroll bar. Can anyone provide assistance with this? Currently, I am utilizing Material-UI and have followed the model in Sandbox. View screenshot Materia ...
Perhaps this question may seem simplistic, but I have yet to come across a satisfactory explanation. As someone new to React and recently delving into Material UI, I am unsure about when it is best to use an Input versus a TextField for constructing forms. ...
I'm in the process of setting up a form with validation: import React from 'react'; import { useForm } from "react-hook-form"; import axios, {AxiosResponse} from "axios"; import {Box, Button, Container, Grid, Typography} ...
Currently, I am utilizing version 4 of Material UI in my project. One issue that I am facing is with a custom dialog box which is widely used throughout the project. Access the codeSandBox here Within the dialog box, there is a form containing text field ...
I have incorporated a SearchBar and TabBar on a view using the CosmicMind Swift Material framework for swift. The setup code is as follows: window = UIWindow(frame: Screen.bounds) let tabBarControllers = [MySearchBar(rootViewController:ViewController2 ...
I'm trying to implement a Scrollable AppBar that hides on scroll down and reappears when scrolling up. Check out this image for reference To achieve this functionality, I am following the guidelines provided by Material-UI documentation export defa ...