material-ui

问题 Typescript is always complaining about certain properties missing in the palette. My app works just fine if I add //@ts-ignore , but I obviously want to avoid that. I'm new to Typescript and here is what I've tried. import createMuiTheme, { ThemeOptions, Theme } from '@material-ui/core/styles/createMuiTheme'; import { PaletteOptions } from '@material-ui/core/styles/createPalette'; interface IPaletteOptions extends PaletteOptions { chip: { color: string, expandIcon: { background: string, color

问题 I have a multi-step form that I want to implement in React using Formik , Material-ui , functional components, and the getState hook. import React, { useState, Fragment } from 'react'; import { Button, Stepper, Step, StepLabel } from '@material-ui/core'; import FormPartA from './FormPartA'; import FormPartB from './FormPartB'; import FormPartC from './FormPartC'; function MultiStepForm(props) { const steps = ['Part A', 'Part B', 'Part C']; const passedValues = props.values || {}; const

问题 I'm building a React 16.13.0 application with the materialui-tabs theme, https://material-ui.com/api/tab/. I have created these styles in my component ... const theme = createMuiTheme({ overrides: { MuiTab: { root: { "&.MuiTab-root": { backgroundColor: "black", border: 0, borderBottom: "2px solid", "&:hover": { border: 0, borderBottom: "2px solid", }, }, "&.Mui-selected": { backgroundColor: "none", borderBottom: "2px solid #373985", borderColor: "#373985", } } } } }); const useStyles =

问题 I have a problem with a fullscreen dialog that is being closed when the associated "OnClose" function is called. The dialog closes, however i cannot be opened again. Any idea on why this happens? It feels like there is an invisible dialog staying on the canvans that prevents event from being bubbled to the button, or something similar. import React from "react"; import Button from "@material-ui/core/Button"; import Dialog from "@material-ui/core/Dialog"; import "./FooterBar.css"; import Slide

问题 I was wondering if there's a standard way to write import statements in react? For example, I have this: import React, { useState, FormEvent } from 'react'; import Avatar from '@material-ui/core/Avatar'; import {Grid, Checkbox, TextField, FormControlLabel, CssBaseline} from '@material-ui/core'; import LockOutlinedIcon from '@material-ui/icons/LockOutlined'; import { LOGIN } from '../../graphql/mutations/login'; import { schema } from '../../helpers/validations/login'; import { Redirect } from

问题 I am trying to set the initial value of the Autocomplete to "ACCU-SEAL 35-532 Bag Sealer" but get the following error: Material-UI: the 'getOptionLabel' method of Autocomplete returned undefined instead of a string for "ACCU-SEAL 35-532 Bag Sealer". so I tried to add the following to my Autocomplete: getOptionSelected={(option, value) => option.label === value} but I get the same error. I have an example of my code up here: https://codesandbox.io/s/material-demo-fv075?file=/formElementsEdit

问题 I'm using the React Material UI's Select Component. I wish to remove or speeden the animation that comes when the menu is opening. I tried something like: <Select ... TransitionComponent={({children}) => children} > <MenuItem value={...}>...</MenuItem> ... </Select> But this is not working, please help 回答1: add this to your stylesheet: .MuiMenu-paper { transition-duration: 0s !important; } This basically overrides the transition duration of the select dropdown and sets it to 0 seconds. You

问题 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

问题 I have a Material UI select box that is not applying the selections when they are initially selected options. I've created a Code Sandbox where you can see that the first two options that are initially specified are not selected in the select field, which produces a duplicate selection if any of those is selected again. But everything works fine if the selectedOptions variable is initially initialized as an empty array [] . Is there any way to fix this without changing the type of the

问题 I'm currently training on ReactJS. I'm using material-ui and JSS (totally new for me). I don't understand how can I simply select my H6 element or my H6 children elements (dangerStyle). Any idea ? Thanks ! myJss.js const myJss = theme => ({ textCenter : { textAlign:'center' }, dangerStyle: { fontWeight:'normal', color:"#FF0000" }, h6: { color:"#00FF00", "&.dangerStyle" : { fontWeight:'bold', } } }); export default myJss; app.js import React, { Component } from 'react' import { withStyles }