material-ui

问题 How do I go about styling the transparent dark overlay of a material-ui dialog or modal? I'm using material-ui/React/Typescript. Instead of a transparent dark, I want it to be a transparent white. I'd prefer a JSS solution but an inline style is welcomed. 回答1: You can use the BackdropProps property of the modal: <Modal aria-labelledby="simple-modal-title" aria-describedby="simple-modal-description" open={this.state.open} onClose={this.handleClose} BackdropProps= {{ classes: { root: classes

问题 I am trying to implement a toolbar on a page in which I have three ToolbarGroup components: <Toolbar> <ToolbarGroup firstChild={true} float="left"> {prevButton} </ToolbarGroup> <ToolbarGroup> {releaseBtn} </ToolbarGroup> <ToolbarGroup lastChild={true} float="right"> {nextButton} </ToolbarGroup> </Toolbar> The general idea is that prevButton should render all the way to the left of the toolbar (it does), nextButton should render all the way to the right (it does)... and that releaseBtn should

问题 I'm trying to create a sticky footer inside the <LeftNav> component, so far unsuccessfully. This is what is needs to look like: I have tried using position: fixed; bottom: 0 and position: absolute; bottom: 0 on the wrapper of the search field, but when the user scrolls the list items the search field travels up. Like this: Any idea how to fix this? 回答1: Position: fixed should work. Without more information about how you have your page setup, it's hard to be more specific. Take a look at this

问题 There are a few material-ui components that do not render their results in the same place as the component is placed by their parent. Among these we have the Dialog , Menu , etc. This makes it apparently impossible to test for their content's presence in a jest.js wrapper with some parent component mounted in it. For example given the following component: class DropdownMenu extends React.Component { onButtonClick = (e) => { this.setState({ open: true, anchorEl: e.currentTarget }); } render()

问题 _Header (cshtml) <div id="Help"></div> export default class Help { ReactDOM.render( <Help/>, document.getElementById('Help') ); } Help.js (component) } My goal is to render a help button on header. I've Created div tag with id help-modal , and a component rendering help button. I am connection those two in help.js by ReactDOM.render(.........); when I do npm run dist and dotnet run , and see the browser I couldn't see the button on header . Can any one help on this please ?? 回答1: You are

问题 _Header (cshtml) <div id="Help"></div> export default class Help { ReactDOM.render( <Help/>, document.getElementById('Help') ); } Help.js (component) } My goal is to render a help button on header. I've Created div tag with id help-modal , and a component rendering help button. I am connection those two in help.js by ReactDOM.render(.........); when I do npm run dist and dotnet run , and see the browser I couldn't see the button on header . Can any one help on this please ?? 回答1: You are

问题 material-ui v1 How can I change TextField underline hover color by theme palette? I know it possible by overrides, but how it can work for all components by standart palette options? like: const themeMui = createMuiTheme({ palette: { primary: lightBlue, secondary: blue, error: red, common: { darkBlack: blue.A700, } } }); What exactly CSS code I want to change: 回答1: Hey I realize this is a bit old, but I have been having the same problem. I came up with this. Hope it helps... there docs are

问题 I'm discovering ReactJS and material-ui (http://material-ui.com/). I try to create a default template for my application. I want to use an AppBar and a LeftNav (renamed in Drawer in new versions) in separated components. The AppBar has a menu button on it by default. I want to use it to open the LeftNav but I don't know how I can call my LeftBarComponent component function to open it. I've almost understood how to communicate between components but in my case, I don't know how I could do

问题 I got this message in my console: Failed Context Types: Required context muiTheme was not specified in AppBar AppBar.js:158 Uncaught TypeError: Cannot read property 'prepareStyles' of undefined I just have an AppBar in my Component I think it should work but... here my very simple code: import React from 'react'; import {AppBar} from 'material-ui'; export class MyComponent extends React.Component { render() { return ( <div> <AppBar title="Title" /> </div> ); } } thanks for helping... 回答1:

问题 I got this message in my console: Failed Context Types: Required context muiTheme was not specified in AppBar AppBar.js:158 Uncaught TypeError: Cannot read property 'prepareStyles' of undefined I just have an AppBar in my Component I think it should work but... here my very simple code: import React from 'react'; import {AppBar} from 'material-ui'; export class MyComponent extends React.Component { render() { return ( <div> <AppBar title="Title" /> </div> ); } } thanks for helping... 回答1: