material-ui

问题 When creating a theme for colors with Material-UI, I set contrast text to white (#fff). It is working for the button with primary color, but not secondary. Tried overrides as described here: Material UI: Unable to change button text color in theme. If an override will solve it, then I need help writing one. const colortheme = createMuiTheme({ palette: { primary: { main: '#e91e63' }, secondary: { main: '#03a9f4' }, contrastText: '#fff', } }); Expecting both buttons to have white text. Instead

问题 I am trying to get a form working inside of a Material UI Dialog component. If I wrap the Dialog in the form tags, they do not even show up in the resulting html (no idea why yet)... <form onSubmit={someFunction}> <Dialog> ... </Dialog> </form> If I reverse it and put the form tags inside the Dialog, the form elements show up in the resulting html, but then the action button set to type="submit" will not fire the form's onSubmit. <Dialog> <form onSubmit={someFunction}> ... </form> </Dialog>

问题 I have a problem with the order of stacking of grid items whenever browser shrinks. This is what I want on the normal desktop screen( lg ): --------------------------------------------- | col 1 | col 2 | col 3 | --------------------------------------------- But After Shrinking the browser I am getting the following result: ------------------------- | col 1 | ------------------------- ------------------------- | col 2 | ------------------------- ------------------------- | col 3 | ------------

问题 I am using material UI tabs v0.20.0 for display content in tabular format. Tabs are taking full width. I have attached screenshot of expected and current output . Expected output Current Output Please let me know solution for same. Thanks in advance 回答1: If you want tabs of fixed width, you need to override the root css class passed to the Tab component, where you have to override both the minWidth and width attributes. Example: const Component = ({ classes }) => ( <Tabs value={0}> <Tab

问题 How to create table with scroll overflow in Material UI v1 (v1-beta currently)? In component demos in MUI documentation there is no such example. 回答1: In all of the Table examples, there is a class applied to the div containing the Table that configures horizontal scrolling. It isn't apparent unless you're viewing the documentation with a sufficiently small viewport. (see BasicTable.js): const styles = theme => ({ paper: { width: '100%', marginTop: theme.spacing.unit * 3, overflowX: 'auto', }

问题 I am using gatsby and material UI according to the official example and I am wondering if I have to add the withRoot wrapper to EVERY component that uses MUI or if I can just wrap the highest level component that I want to use MUI? I am having trouble with the render and IDK how to track down the cause. In dev everything works great, but in prod, <Grid> alignments are off and on the initial render, there are no styles applied. They are applied a second or two after the first paint. I have

问题 In React material ui, how do you make app bar fixed so that it stays fixed while the rest of the page scrolls? 回答1: Just add a position: fixed !important; css (inline or with external css) to your AppBar component. The !important is needed if you use external css to force overriding the style defined in material-ui. Don't forget to set margin-top to your content because it will get pushed to the top. 回答2: Don't know if this feature is just new but you don't need the code above. Just add a

问题 I'm looking to make multiple scrolling columns using Material UI in React. I had a way of doing it in bootstrap with flex, but I can't get it to translate over. I have put together a demo of a hacky way to do it that requires knowing the size of the contents above what you're trying to scroll (in this case, the AppBar) https://codesandbox.io/s/pmly895mm html, body { margin: 0; height: 100%; } #root { height: 100%; } .grid-container { height: calc(100% - 64px); } .grid-column { height: 100%;

问题 When using the Card component from Material UI it seems like the CardContent has a padding-bottom of 24px that i cannot override with the following code. I can set paddingLeft, Right and Top using this method but for some reason paddingBottom won't work. const styles = theme => ({ cardcontent: { paddingLeft: 0, paddingRight:0, paddingTop:0, paddingBottom: 0, }, }) And then applying that style: <CardContent className={classes.cardcontent}></CardContent> this is what I see when previewing the

问题 When using the Card component from Material UI it seems like the CardContent has a padding-bottom of 24px that i cannot override with the following code. I can set paddingLeft, Right and Top using this method but for some reason paddingBottom won't work. const styles = theme => ({ cardcontent: { paddingLeft: 0, paddingRight:0, paddingTop:0, paddingBottom: 0, }, }) And then applying that style: <CardContent className={classes.cardcontent}></CardContent> this is what I see when previewing the