material-ui

问题 I'm trying to imitate the outlined textfield from Material-UI but I don't know how to hide the border behind the title text. In the below image, notice how the "Due Date/Time" is taken from the Material-UI library and the title hides the border behind it but when I tried to imitate it with a custom component I just couldn't hide the border. Alternatively, Is there a better way to use this outline design instead of just implementing it with CSS? My current component looks liks this: <div style

问题 I try to figure out if it is possible to hide only the upper part of the nav-bar. See Img below (green marked area). This should mimic the navbar behaviour like the whatsapp-app. I am using material-ui for this use-case. With my implementation the app-bar only extends again if the scroll position is < 48px . On the .gif-file (see below) it extends on every scroll up event. It also looks like the app-bar scrolls only first until it reaches position fixed. After then the rest of the content

问题 I'm trying to use Material-Table component - it's perfect for a table that I'm buildling (add, edit, delete and search rows). I've installed and used it as a child component of a page - everything works but... STYLING: all custom and built-in styling in the page is lost in all the Material UI components (ie. AppBar buttons have no padding/spacing between, custom font styling is messed up). ICONS: The icons in the table won't render - they just appear as large cut-off text. Styling and icons

问题 I'm trying to use Material-Table component - it's perfect for a table that I'm buildling (add, edit, delete and search rows). I've installed and used it as a child component of a page - everything works but... STYLING: all custom and built-in styling in the page is lost in all the Material UI components (ie. AppBar buttons have no padding/spacing between, custom font styling is messed up). ICONS: The icons in the table won't render - they just appear as large cut-off text. Styling and icons

问题 I'm trying to override the styling of Material-UI v1 components, using the overriding by classes method. When I try to override a nested property, for example the :hover pseudo class on the root key I get the following warning: Warning: Material-UI: the key `.MyButton-root-w:hover` provided to the classes property object is not implemented in Button. You can only overrides one of the following: See for example: import React from "react"; import { createStyleSheet, withStyles } from "material

问题 I have a component that has children of the same type as the component itself. I can render the children as well but the children can't seem to access their slice of state. I'm using React with Redux export class Material extends React.Component { constructor(props) { super(props) this.renderChild = this.renderChild.bind(this) this.getNestedItems = this.getNestedItems.bind(this) } static propTypes = { parentId: PropTypes.number, id: PropTypes.number.isRequired, name: PropTypes.string

问题 In Material UI, I want to set borderRadius on my buttons. Passing the style attribute seem to work for FlatButton but not for RaisedButton . For RaisedButton , the borderRadius is applied to the parent <div> (which is necessary) but not to <button> itself (which is also necessary) Is this a bug in Material UI? Or is this behaviour intended? If it's intended, then how do I make a RaisedButton with rounded corners? import React from 'react'; import RaisedButton from 'material-ui/lib/raised

问题 I am toying with material-ui. I implemented LeftNav using routes, but I could not find a way to get IconMenu, or Menu working with links or routes. Anyone can point me to a good source / tutorial? The documentation falls short, and both components seem not to support 'menuItems' as property as LeftNav does. 回答1: 2016 December Edit: the linkButton prop is deprecated , you will get a warning: Warning: Unknown props `linkButton` on <a> tag. So simply remove the prop: <MenuItem containerElement={

问题 How can I set the focus on a material-ui TextField component? componentDidMount() { ReactDom.findDomNode(this.refs.myControl).focus() } I have tried above code, but it does not work :( 回答1: You can use the autoFocus attribute. <TextField value="some value" autoFocus /> 回答2: autoFocus was also not working for me, perhaps since this is a component that's not mounted when the top-level component loads. I had to do something a lot more convoluted to get it to work: function AutoFocusTextField

问题 I am using Material UI v4, i'm exporting my styles from a single file, But the styles won't work in other components styles.js const useStyles = makeStyles(theme => ({ root: { display: 'flex', }, // textField component styles textFieldInput: { margin: theme.spacing(2), width: 250, minWidth: 250, }, formControl: { margin: theme.spacing(2), minWidth: 120, }, }) export {useStyles} In my component file .... const classes = useStyles(styles); return ( <TextField className={classes.textFieldInput}