material-ui

问题 I created a drop-down menu by using Material-UI, and I found one thing annoying: I want to let my drop-down menu appear under the bar when I click it, but every time it just covers the bar (as the image below) Is there any way I can do to let the drop-down menu appear below the bar? (not covering the Your order label and the number) My codes are as below: I try to modify the anchorOrigin property and transformOrigin property but it didn't work. <Menu id="order-menu" anchorEl={anchorEl}

问题 Hi I am trying to implement material UI autocomplete dropbox with an icon next to the displayed text. my implementation is working, but when I select one of the options its not being displayed. The problem is with this part of the code: renderInput={params => ( <Fragment> <TextField {...params} variant="outlined" label="Select Account" placeholder="Favorites" margin="normal" fullWidth /> </Fragment> )} if I remove he icon rendering from getOptionLabel then when selecting the selected text

问题 how to add icon inside Select options I made many tries none of them are working <option value={0}>Item One</option> <option value={1}> <i class="fas fa-expand" /> Item two </option> full sample code class IconInSelect extends Component { state = { value: 0 }; handleChange = name => event => { this.setState({ [name]: event.target.value }); }; render() { const { value } = this.state; const { classes } = this.props; return ( <Select autoWidth native value={value} onChange={this.handleChange(

问题 I am new to React and Material UI. I am struggling with how much vertical space the components take up. One thing I would like to do is decrease the height of the toolbar. I have tried specifying the style: <Toolbar style={{ height: '36px' }}> I have also tried doing it this way: const styles = { root: { height: 36, } }; <Toolbar className={classes.root} > but neither works. Is there a different way to do this? 回答1: You need to change the min-height to adjust the height, as min-height is

问题 the following project is working locally (I built it using create-react-app) but when moved it to codepen it's not working and it's driving me crazy (it's giving me a vague error in the console Uncaught ReferenceError: require is not defined ), any help would be appreciated: https://codepen.io/bahax/pen/ExPzbgZ?editors=0010 here's the code as suggested by SOF editor: import {Paper, Typography} from 'material-ui/core'; let styles = { leftStyles : { marginTop: '1vh', marginLeft: '1vw', width:

问题 I am currently writing a material-UI reason-react binding and I want to know how I can re-use previously define Props. The Select component spreads all of the Input props into itself, in the underlying react-js lib. this is done by spreading props however this is discouraged in ReasonML as typings are lost. As a temporary solution, I have copied the props from one to another but this is not scalable. I would appreciate if someone could suggest what is the correct way of doing this in Reason

问题 I've read up on: https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js and http://www.material-ui.com/#/customization/themes But can't seem to find the answer to what I'm looking for. I'm simply trying to change the color of the hovered item. I believe by looking at those docs I should just reference menuItem and provide a hoverColor , although that isn't working. Any thoughts? (don't mind the inline css overriding, just experimenting with different ways of doing

问题 I have a material-ui autocomplete element <Autocomplete id="combo-box-demo" autoHighlight openOnFocus autoComplete options={this.state.products} getOptionLabel={option => option.productName} style={{ width: 300 }} onChange={this.selectProduct} renderInput={params => ( <TextField {...params} label="Select Product Name" variant="outlined" /> )} />; I want this element to get focus when I click a button. I tried using references as discribed here how react programmatically focus input It worked

问题 How do I center elements inside a Material UI Grid item? Here is a snippet from my React application: <Grid container> <Grid item xs={4}> // Unrelated stuff here </Grid> <Grid item xs={4}> // How do I centre these items? <IconButton className={classes.menuButton} color="inherit"> <EditIcon/> </IconButton> <IconButton className={classes.menuButton} color="inherit"> <CheckBoxIcon/> </IconButton> </Grid> <Grid item xs={4}> // Unrelated stuff here </Grid> </Grid> I've tried applying alignContent

问题 I am trying to overwrite the Material UI CSS and align the the phone icon and the phone text in the same line and closer to each other. I researched and found Tabs API. Then I debugged and found the wrapper property was creating a problem. I tried fixing by setting display to block but the phone icon and phone text are still not aligning in same line. I've provided code and sandbox below. All of my code is in tab-demo.js https://codesandbox.io/s/7p4ryw691 const styles = theme => ({ root: { //