material-ui

问题 The docs at material ui for reactJS proposes this sample code for determinate progress bars. export default class LinearProgressExampleDeterminate extends React.Component { constructor(props) { super(props); this.state = { completed: 0, }; } componentDidMount() { this.timer = setTimeout(() => this.progress(5), 1000); } componentWillUnmount() { clearTimeout(this.timer); } progress(completed) { if (completed > 100) { this.setState({completed: 100}); } else { this.setState({completed}); const

问题 The docs at material ui for reactJS proposes this sample code for determinate progress bars. export default class LinearProgressExampleDeterminate extends React.Component { constructor(props) { super(props); this.state = { completed: 0, }; } componentDidMount() { this.timer = setTimeout(() => this.progress(5), 1000); } componentWillUnmount() { clearTimeout(this.timer); } progress(completed) { if (completed > 100) { this.setState({completed: 100}); } else { this.setState({completed}); const

问题 I have two styles. One thing is included in specific components, another thing is included in global components. for example, let's suppose that we have the following tree. index.tsx -App.tsx -globalConstants.ts in globalConstants.ts import { Theme, makeStyles, createStyles } from '@material-ui/core/styles'; export const sharedStyles = makeStyles((theme: Theme) => createStyles({ . . . }), ); in App.tsx import React from 'react'; import { Theme, makeStyles, createStyles } from '@material-ui

问题 I have a form that creates an event using Formik library. I need to check to see if the start date overlaps the end date and vice-versa. I have two date pickers that choose the date and time. How can I use Yup to validate this and show an error message if they do overlap? Thanks for the help in advance const validationSchema = Yup.object().shape({ eventName: Yup.string() .min(1, "Must have a character") .max(10, "Must be shorter than 255") .required("Must enter an event name"), email: Yup

问题 I have created a web app with the base coming from the Material-UI Example on a responsive drawer I am trying to get a table to resize responsively to the screen width, but, for some reason, the ResponsiveDrawer container provided by Material-UI is breaking the responsiveness of the contents (i.e. the table) Here is an example that I wrote that is perfectly responsive: App.js import React from "react"; import ReactDOM from "react-dom"; import Table from "@material-ui/core/Table/Table"; import

问题 Preface I asked a similar question to this several days back and while related in nature I believe the solution will ultimately be different, so I am asking again in a different thread. CodeSanbox Example (Has Been updated to reflect the accepted answer) The issue: I'd like any external styles passed in with the className prop to have higher specificity than my custom components internal style. That way someone using it can adjust margins and padding. However, my components default internal

问题 Preface I asked a similar question to this several days back and while related in nature I believe the solution will ultimately be different, so I am asking again in a different thread. CodeSanbox Example (Has Been updated to reflect the accepted answer) The issue: I'd like any external styles passed in with the className prop to have higher specificity than my custom components internal style. That way someone using it can adjust margins and padding. However, my components default internal

问题 I am trying to change the border of a select component from Material-UI. So far I've tried: const styles = theme => ({ root: { display: "flex", flexWrap: "wrap", backgroundColor: "lightgrey" }, formControl: { margin: theme.spacing.unit, minWidth: 120 }, selectEmpty: { marginTop: theme.spacing.unit * 2 }, cssLabel: { color: "pink", "&$cssFocused": { color: "pink" } }, cssFocused: { color: "pink" }, underline: { "&:after": { borderBottom: "1px solid pink", borderTop: "1px solid pink" } } }); I

问题 I have a NativeSelect <NativeSelect input={<BootstrapInput/>} onChange={this.handleClick} > <option value="1">1</option> <NativeSelect> How can i change the color of button dropdown? 回答1: Below is an example showing how to change the color of the ArrowDropDownIcon for the various ways ( Select , NativeSelect , TextField ) of creating a select in Material-UI. For Select and NativeSelect , it leverages the icon CSS class (https://material-ui.com/api/select/#css, https://material-ui.com/api

问题 I want to alter the style of the SelectInput. I'm using a class based component. I set it up this way: const QuoteListStyle = { color: "#eceff1", borderBottom: "1px solid #90caf9", "&:hover:not($disabled):not($focused):not($error) $underline": { borderBottom: "2px solid #90caf9" }, width: "196px", marginTop: "1rem" }; Then in the render I have this section with the Select: <FormControl> <Select style={QuoteListStyle} value={this.state.quoteListName} onChange={this.handleChange} displayEmpty=