I recently developed a website using Material UI, where all buttons are styled as "outlined" except for the Calendar in KeyboardDatePicker. The "ok" and "cancel" buttons in this dialog have the default appearance.
After reviewing the API documentation (), I couldn't find any prop to change the button variant.
Is there an alternative method to customize these buttons?
If you want to customize the style of KeyboardDatePicker buttons, the best way I have found is to override the MuiButton style within a ThemeProvider.
Check out a functioning example here.
To do this:
Wrap your KeyboardDatePicker component in a ThemeProvider like this:
<ThemeProvider theme={muiTheme}>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker />
</MuiPickersUtilsProvider>
</ThemeProvider>
Create a custom muiTheme using createMuiTheme as follows:
const muiTheme = createMuiTheme({
overrides: {
MuiButton: {
textPrimary: {
border: "1px solid rgba(0, 0, 0, 0.23)",
padding: "5px 15px"
}
}
}
});
That's all you need to do. The result will look like this:
https://i.stack.imgur.com/M5dyr.png
Note: By doing this, you are overriding the style of all MuiButtons used in your application (which should be fine if you are using outlined buttons everywhere).
Building on the concept introduced by @Giovanni Esposito, you have the ability to utilize a theme for modifying or eliminating styles from the primary Buttons, and embed your own buttons using okLabel and cancelLabel which can accept customized components:
import {
Button,
createTheme,
ThemeProvider,
} from "@material-ui/core";
import {
KeyboardDatePicker,
MuiPickersUtilsProvider,
} from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
const MuiPickersTheme = createTheme({
...appThemeOptions,
overrides: {
...(appThemeOptions.overrides || {}),
MuiButton: {
textPrimary: {
padding: "0",
},
},
},
});
const CustomDatePicker = (props) => {
return (
<ThemeProvider theme={MuiPickersTheme}>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
{...props}
cancelLabel={
<Button color="default" disableElevation>
Cancel
</Button>
}
okLabel={
<Button color="secondary" variant="contained" disableElevation>
Apply
</Button>
}
/>
</MuiPickersUtilsProvider>
</ThemeProvider>
);
};
export default CustomDatePicker;
It is important to note that this approach may not offer optimal performance; refer to https://v4.mui.com/customization/theming/#a-note-on-performance for more information.
I'm currently developing a next.js page called /page/data/[dataId] (this page is accessed when a user clicks on a link from the page /page/data, where I fetch the list of items through an API). When a user clicks on a button, I make an API call to de ...
Currently, I am tackling a date comparison task for our application. The main objective is to compare the Start Date inputted by the user with the Operator/Region Effective Date, which signifies when a new list of product prices becomes valid. Our aim is t ...
I am currently exploring the most effective approach for managing errors, particularly when deciding between error codes and an errors object in response from my API. As I dive into building a multi-part form using react, each time a user progresses to th ...
I've been working on populating a Select Component from the Material UI library in React, but I'm facing an issue where I can't choose any of the options once they are populated. Below is my code snippet: import React, { useState, useEffect ...
I have been struggling to resolve this issue, but unfortunately, I have not found a successful solution yet. The error message I am encountering is: Type '{ mailData: mailSendProps; }' is causing an issue as it is not compatible with type &apos ...
In my app.js file, I have included a unique component called "SigningComponent" with the following code: onSign = () => { this.setState({ route: "home" }); }; registerFunction = () => { this.setState({ route: "registration" }); }; render() { ...
I am currently working on creating a user interface layout with components that need to be arranged in a specific order, as depicted in the accompanying image. My task involves developing a Material UI Dialog within a React application based on the design ...
As a FrontEnd developer, I have limited knowledge when it comes to security. Currently, I am saving the userId of users in web localStorage so that requests can be made to the server for user information. However, I am concerned about the potential risks i ...
How can I create a scratch card animation using React Native? What strategies should I consider in order to achieve this outcome? While I am aware of existing libraries that may assist with this task, I am particularly interested in exploring different ap ...
I am working with two different endpoints and I need to fetch data from both simultaneously in order to display it in one single element. For example, I want to show data from one table along with the corresponding name from another table if the product id ...
Is there anyone who can assist me in resolving this issue? I'm currently learning React Native and exploring styled components, but I've encountered a problem where the styled components are not compatible with the react18 version. However, they ...
Currently, I am utilizing RTK query with a modular structure which eliminates the need to manually write endpoints for each URL. However, there is an issue where if two API calls are made within the same component, the most recent call will override the pr ...
How can I achieve a similar style for the bottom tab like the one shown in this model? View Model <HomeTabs.Navigator screenOptions={({route})=>({ tabBarIcon: ({color, size})=>{ const {name} = icons[route.name ...
As stated in the React Material-UI documentation, I have access to a prop called hoveredStyle: http://www.material-ui.com/#/components/icon-button I intend to utilize the IconButton for two specific purposes: Make use of its tooltip prop for improved ac ...
Currently, I am working on a React application using Next.js and trying to incorporate a graph feature using recharts from . Below is the code snippet I have implemented: /index.js const formatDate = (value) => { return moment.unix(value).format(&apo ...
https://i.stack.imgur.com/oXKQm.png I'm struggling to figure out how to change the color of the line underneath 'Search' and the arrow on the right to white. I've tried applying styles to the .MuiAutocomplete-root css class, but it did ...
I've been trying to incorporate my own icon for the material UI select component. I successfully replaced the default icon using the "IconComponent" attribute in MU select. However, I'm facing issues with the new icon not rotating when the menu ...
My React components repository includes individual .css files for each component which are imported into the respective components. These components are then bundled using a rollup configuration and published as an NPM package, with all component CSS being ...
I am currently utilizing React SPA, Express, Express-session, Passport, and JWT. I find myself puzzled by the various client-side storage options available for storing tokens: Cookies, Session, and JWT/Passport. Is it necessary to store tokens in cookies, ...
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faSearch, faAmbulance, faAnchor, faPlus, faFloppyDisk, } from '@fortawesome/free-solid-svg-icons'; import { Input, Table, Button, Modal, Moda ...