material-ui

问题 I'd like to change the styling of a Material-UI RaisedButton on hover, but it seems like there is no specific option to do that, as what happens on hover is sort of defined by material design guidelines. Nevertheless, is there any way to change a button's styling (mainly color and background-color) when hovering over them? I see m-ui is using a lot of different layers for their buttons, and currently adds a white transparent background on top of the button so that it performs well with all

问题 Working on a project that is using the Material-UI library of components and I've gotten a request for a custom button hover color that is outside of the normal convention of the MUI theme. I found this relevant block of code in the Raised Button source, https://github.com/callemall/material-ui/blob/master/src/RaisedButton/RaisedButton.js#L98. Setting a custom labelColor does change the hover state, but that still does not satisfy my current need to have the button hover color something

问题 See this question here: How change active tab color in React material-ui? And this answer here: https://stackoverflow.com/a/37332913/4561887 The answer they gave works: <Tabs inkBarStyle={{background: 'blue'}}>... But I'd also like to change the inkBarStyle to be black and thicker. Here's the Material-UI Tabs documentation where I found the inkBarStyle Tabs property: http://www.material-ui.com/#/components/tabs. Here's what I've tried. All have failed: <Tabs inkBarStyle={{background: 'black'}

问题 In the screenshot above, I am trying to change the step color to either: green for correct, yellow for in-progress and red for incorrect. How could I do this? 回答1: Old question but in case anyone is looking. You need to edit the theme and wrap it in getMuiTheme import getMuiTheme from 'material-ui/styles/getMuiTheme' const muiTheme = getMuiTheme({ stepper: { iconColor: 'green' // or logic to change color } }) <MuiThemeProvider muiTheme={muiTheme}> <Stepper> ... </Stepper> </MuiThemeProvider>

问题 With the React Starter Kit, I add Material UI as follows: npm install material-ui --save and the following import to a component: import RaisedButton from 'material-ui/lib/raised-button'; and: <RaisedButton label="Default" /> I get the following error: Warning: Material-UI: userAgent should be supplied in the muiTheme context for server-side rendering. According to Material UI's documentation, it says I'd need to address three things: autoprefixer and the user agent process.env.NODE_ENV What

问题 All the material-ui examples show Toolbar inside Appbar. Why not just Appbar? What's the difference between the two? https://material.io/design/components/ does not have Toolbar component, only "App bars: top". https://material.io/develop/web/components/toolbar/ says "The existing MDCToolbar component and styles will be removed in a future release" So will material-ui Toolbar go away eventually? 回答1: I was looking at the default CSS properties produced by each component. The main purpose of

问题 I'm trying to set the z-index of components on a custom theme in Material-UI. They have moved the zIndex out of the base theme in the in version 0.14.2 and instead zIndex is set in a node module called zIndex.js. I would like to override the zIndex in my component but can't find a way to do this without changing the node module itself which is a bad idea. I have a custom theme set up in a separate page like so import Colors from 'material-ui/lib/styles/colors'; import ColorManipulator from

问题 Is there a way to change the background property of my material-ui AppBar component to transparent without having to actually change the CSS? I've tried the opacity property, but that reduces the opacity of everything within the component it seems. Below is an example of what I mean on Stripe's website. 回答1: You can change its background color to transparent and remove the box-shadow this way: <AppBar position="static" style={{ background: 'transparent', boxShadow: 'none'}}> 回答2: The inline

问题 given card code as in here : card how can I update the card style or any material UI style as from const styles = theme => ({ card: { minWidth: 275, }, to such follows: const styles = theme => ({ card: { minWidth: 275, backgroundColor: props.color }, when I tried the latest one, I got Line 15: 'props' is not defined no-undef when I updated code to be : const styles = theme => (props) => ({ card: { minWidth: 275, backgroundColor: props.color }, also const styles = (theme ,props) => ({ card: {

问题 I want to pass textfield values when user press enter key from keyboard. In onChange() event, I am getting the value of the textbox , but How to get this value when enter key is pressed ? Code: import TextField from 'material-ui/TextField'; class CartridgeShell extends Component { constructor(props) { super(props); this.state = {value:''} this.handleChange = this.handleChange.bind(this); } handleChange(e) { this.setState({ value: e.target.value }); } render(){ return( <TextField hintText=