react-material

问题 I have a problem overriding the styles in my theme in Material UI in React. I wanted to customize the border of columnsContainer but it isn't working. only the root is working well. Check Here for Codesanbox MuiDataGrid.js export default { root: { backgroundColor: "white", border: `1px solid green`, "& .columnsContainer": { borderBottom: `1px solid 'blue' !important` } } }; 回答1: Below is the correct syntax. The changes compared to your code sandbox are: Replace .columnsContainer with

问题 I'm using this React Material Modal. In the demo examples you can see that when you open the modal, has a blue border. There's a way to remove it? I see in the Modal Api that haves the property disableAutoFocus but i'm setting "true" and my modal still have this blue border: <Modal disableAutoFocus="true" aria-labelledby="transition-modal-title" aria-describedby="transition-modal-description" className={classes.modal} open={open} onClose={handleClose} closeAfterTransition BackdropComponent=

问题 Normally this is how you use Material-UI's Dialog. The code below is taken from Material-UI's docs export default function AlertDialog() { const [open, setOpen] = React.useState(false); const handleClickOpen = () => setOpen(true); const handleClose = () => setOpen(false); return ( <div> <Button variant="outlined" color="primary" onClick={handleClickOpen}> Open Dialog </Button> <Dialog open={open} onClose={handleClose}> {...} </Dialog> </div> ); } But I want it to create the Dialog

问题 Normally this is how you use Material-UI's Dialog. The code below is taken from Material-UI's docs export default function AlertDialog() { const [open, setOpen] = React.useState(false); const handleClickOpen = () => setOpen(true); const handleClose = () => setOpen(false); return ( <div> <Button variant="outlined" color="primary" onClick={handleClickOpen}> Open Dialog </Button> <Dialog open={open} onClose={handleClose}> {...} </Dialog> </div> ); } But I want it to create the Dialog

问题 I recently started using Material Design React, but I have just come across that data-someField does propagate the value to the dataset map. Example: <Input data-role=‘someValue’ onChange={this.onChange} /> onChange = e =>{ const role = e.target.dataset.role const role2 = e.currentTarget.dataset.role } Both roles in the onChange handler are undefined. This doesn’t happen if I change the Input tag to a regular html input. Any ideas why Material Design doesn’t allow data attributes or if there

问题 I recently started using Material Design React, but I have just come across that data-someField does propagate the value to the dataset map. Example: <Input data-role=‘someValue’ onChange={this.onChange} /> onChange = e =>{ const role = e.target.dataset.role const role2 = e.currentTarget.dataset.role } Both roles in the onChange handler are undefined. This doesn’t happen if I change the Input tag to a regular html input. Any ideas why Material Design doesn’t allow data attributes or if there

问题 I need to get the validation using Formik that input should only be currentYear and up. const currentYear = new Date().getFullYear(); expiryYear: yup .string() .required('Select expiry year') .min(4, `Invalid year format (Example: ${currentYear + 4})`) .max(4, `Invalid year format (Example: ${currentYear + 4})`) .when('startDate', (currentYear, schema) => currentYear && schema.min(currentYear)), 回答1: Try this please: yup.date() .min(new Date().getFullYear(), 'Year must be current year or

问题 I am trying to build a Redux based notificator based on this example: https://material-ui.com/components/snackbars/#CustomizedSnackbars.tsx And here is what I came up with: import { Snackbar } from '@material-ui/core'; import MuiAlert, { AlertProps } from '@material-ui/lab/Alert'; import React from 'react'; import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import { ProgramCategoryActions } from '../../program/store/program-category.actions'; import {

问题 Trying to alter styling of checkbox when it is focused at a global level using Material-UI (react). At the moment only default and hover styling is working: MuiCheckbox: { colorSecondary: { color: 'green', '&:hover': { color: 'blue !important', border: '1px solid rgba(0,0,0,0.54)', outline: '2px auto rgba(19,124,189,.6)' } }, } What i'm trying to do, but is NOT working: MuiCheckbox: { colorSecondary: { '&$focused': { color: 'blue', border: '1px solid rgba(0,0,0,0.54)', outline: '2px auto rgba

问题 Seems impossible to place <Tooltip> "on top" (stacked/layered above) the triggering anchor element. It always appears outside the parent, using "placement" to decide where. I believe it's the Flip tool within Popper that manages placement and ensures visibility. I've tried passing Popper option modifiers to disable flip, and adjusting the offset. Some recommendations were to skip preventing overflow, and disable GPU acceleration. I'm down a rabbit-hole of MaterialUI internals to accomplish