Category "material-ui"

Button onClick in MUI Datagrid invoked without clicking

I implemented a button inside the MUI v5 Datagrid. Based on the official sample https://mui.com/x/react-data-grid/columns/#render-cell , I added the onClick in

React link's onClick event state change is not happening

I have used react links with mui and I am trying to highlight the active link in header. My attempt is as below. import Link from "@mui/material/Link"; import {

how to change the asterisk color in required * field

I have two required fields in my form .I want the asterisk color should be red.Currently it is showing black .I am using material UI react library ? here is my

Generating groupings within a Material UI Select component dynamically from data

I need to generate the groupings of my Select component dynamically and would like to use the component in a controlled way. (As opposed to uncontrolled.) This

Change borderBottomColor of MUI TextField when input is filled

I'm creating a form using MUI, by default TextField bottom border is grey, blue on focus then again grey on focus loss. I aiming to make it not lose blue color

MUI React, Minimum Date

How can I set Minimum Date, so the user can't pick To Date that is before From Date. Here is my Two Date Pickers, using moment to format the date.

How to make autocomplete field of material UI required?

I have tried a couple of ways in order to make the material UI's autocomplete field of type required but I am not getting the behavior that I wanted. I had enca

How can I use React Material UI's transition components to animate adding an item to a list?

I have this class. class Demo extends React.Component { constructor(props) { super(props); this.state = { items: [] }; this.add = this

Autocomplete - How can I set a default value?

Does anyone know how to add a default value to the Autocomplete component? The component have a dataSource, and I'd like to load the page with a specific item a

Material UI Menu not closing after clicking a menu item

This is code straight from MUI menu - customized menu.. I didn't want to put my code because there are some built in functions that make it more confusing. In

rtl in material UI cause ruined my app appearance

I setup my rtl configuration step by step in v5mui. Using: emotion as styled-engine stylis v4 stylis-plugin-rtl v2 Every thing is OK but when using some complic

How to create a shared component library with MUI 5

I have a custom MUI 5 component library NPM package that exports some basic components built with MUI 5, exports theme file and wraps the theme provider into re

How do i configure makeStyles hook in material-ui with a custom jss insertion point?

I have a react component which i have wrapped & released as a web component. However all style-sheets created using makeStyles hook are not getting applied

MUI: The `styles` argument provided is invalid after upgrading from material v4 to v5

I recently upgraded from Material V4 to V5 and I'm now getting the following error: MUI: The `styles` argument provided is invalid. You are providing a function

How to theme Material UI inside Storybook

Currently this is what I am doing, passing a ThemeProvider above my component file: import React from 'react'; import { ThemeProvider, createMuiTheme } from '@

Module not found: Can't resolve '@date-io/date-fns'

I'm using React Material UI and I get this error : Module not found: Can't resolve '@date-io/date-fns'. Here are the dependencies that I have in my package.jso

Fit parent height for Table in Material UI?

I want the table height to fit the parent’s available height. Ideally, I want: The footer to always be docked at the bottom of the parent container. If t

Creating a grid with the box component and sx prop

In material UI v5 supposedly one can create almost anything with the sx prop, on the list is grid unfortunately I am unable to create what should be a simple gr

Typescript Equality issue on Material UI Autocomplete

Data is stored as: { iso: "gb", label: "United Kingdom", country: "United Kingdom" }, { iso: "fr", label: "France", country: "France" } Value passed to the

How to use MUI in Redwood JS?

I want to install MUI in the Redwood JS. But when i ran the command in the project directory yarn add @mui/material An error popped up in the console saying er