material-ui

问题 How can I change the background color and color for Material UI's Tooltip. I tried as below but it is not working. import { createMuiTheme } from '@material-ui/core/styles'; export const theme = createMuiTheme({ tooltip: { color: '#ffffff', rippleBackgroundColor: 'red' } }); import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider'; import { theme } from "my-path"; <MuiThemeProvider theme={theme} > <Tooltip title={this.props.title} placement={this.props.placement} className=

问题 I have been using material UI v0 from a while and Now I wanted to move to MUI v1.x as v0.x is deprecated. Request to provide a migration guide. 回答1: The link that @thirtydot provided is really all that is available. Not too much documentation is available (yet) for this major version change migration. Keep your eye on these issues: https://github.com/mui-org/material-ui/issues/7195 https://github.com/mui-org/material-ui/issues/11819 So far the best thing I have seen is: https://gist.github

问题 I would like to change the height/thickness of the tab indicator in material ui From this To this 回答1: The indicatorClassName property was removed in the v1.0.0-beta.37 release. The classes property is now the standard way to customize the internal styles of components in v1. For details about this change, see the release notes // Define custom styles const styles = theme => ({ bigIndicator: { height: 5 } }) <Tabs /* use the `classes` property to inject styles for the indicator class */

问题 I have react and react-dom 15.4.2 installed on the React starter kit I'm using and I'm trying to install material-ui; however, npm is telling me for the latest version of material UI (understandably) we need a higher version of React (16.0). Is there a way for me to directly install the version of material-ui which is compatible with the dependencies currently existing in my package.json file? (i.e. I don't know which version this will be and I was wondering if there was a quick way to do

问题 Lets say i want every Button component from material-ui to have a default props of variant="contained" color="secondary" is it possible ? 回答1: The documentation for this is here: https://material-ui.com/customization/globals/#default-props Here is an example of how to do this: import React from "react"; import ReactDOM from "react-dom"; import {createMuiTheme, MuiThemeProvider, Button} from "@material-ui/core"; const theme = createMuiTheme({ props: { MuiButton: { variant: "contained", color:

问题 i am using material UI dropdown component and trying to run a callback function only when user fills all the form and submits the form. On the call back function i intend to collect all the form field and generate url to call to api. My problem is that i can not use onChange as stated solution in #560 as i want to collect all the detail only when user clicks the submit button. It is also weird that at the moment, i am able to get value of all the other form element like slider, textfield

问题 How do I write makeStyles() so that it allows me to use both theme variables and props? I've tried this: const useStyles = makeStyles(theme => ({ appbar: props => ({ boxShadow: "none", background: "transparent", marginTop: theme.spacing(2), marginBottom: theme.spacing(2), color: theme.palette.getContrastText(props) }), })); And called it in the component with: const classes = useStyles(backgroundColor); Where backgroundColor is a prop on the component with type CSSProperties["backgroundColor"

问题 We have built a React project that is using Material-ui to show dialog boxes. For some reason, when you click a button which triggers the dialog to open, a second touch event seems to fire which will potentially trigger a link or button that is on the dialog box. A similar issue happens when you close the dialog box by clicking on a button. When doing this, the dialog closes, but will trigger another touch event on an element that is directly behind the element you clicked on. We have

问题 I am trying to use recharts to implement a BarChart. But the width={600} and height={300} causes the Barchart to be absolute, not responsive. How to make the Barchart a responsive one? I tried using percentage as width={'50%"} height={"40%"} but did not work. import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts'; <BarChart className="barChart" width={600} height={300} data={data} margin={{top: 5, right: 30, left: 20, bottom: 5}} label="heaf"> <CartesianGrid

问题 I used a TextField from react material-ui. I want to know whether the user has pressed Ctrl+Enter. I have tried using onKeyPress event but got no result. How can I achieve this? <TextField value={this.state.message} autoFocus={true} hintText='Type your message here' onChange={this.onChangeMessage} onKeyPress={(event) => { if (event.ctrlKey && event.keyCode == '13') this.sendMessage(); }} multiLine={true} /> 回答1: onKeyPress is a synthetic Key event that React supports as mentioned here. Try