[英]Using material components in react
I've been following the guide for Material UI Beta for react and want to make a simple component using the Drawer. 我一直在遵循Material UI Beta的指南进行反应,并希望使用Drawer创建一个简单的组件。 Below is the code from the official documentation specifying how to create a Component.
以下是官方文档中指定如何创建组件的代码。
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import List from 'material-ui/List';
import Typography from 'material-ui/Typography';
import IconButton from 'material-ui/IconButton';
import Hidden from 'material-ui/Hidden';
import Divider from 'material-ui/Divider';
import MenuIcon from 'material-ui-icons/Menu';
import { mailFolderListItems, otherMailFolderListItems } from './tileData';
const drawerWidth = 240;
const styles = theme => ({
root: {
width: '100%',
height: 430,
marginTop: theme.spacing.unit * 3,
zIndex: 1,
overflow: 'hidden',
},
appFrame: {
position: 'relative',
display: 'flex',
width: '100%',
height: '100%',
},
appBar: {
position: 'absolute',
marginLeft: drawerWidth,
[theme.breakpoints.up('md')]: {
width: `calc(100% - ${drawerWidth}px)`,
},
},
navIconHide: {
[theme.breakpoints.up('md')]: {
display: 'none',
},
},
drawerHeader: theme.mixins.toolbar,
drawerPaper: {
width: 250,
[theme.breakpoints.up('md')]: {
width: drawerWidth,
position: 'relative',
height: '100%',
},
},
content: {
backgroundColor: theme.palette.background.default,
width: '100%',
padding: theme.spacing.unit * 3,
height: 'calc(100% - 56px)',
marginTop: 56,
[theme.breakpoints.up('sm')]: {
height: 'calc(100% - 64px)',
marginTop: 64,
},
},
});
export class ResponsiveDrawer extends React.Component {
state = {
mobileOpen: false,
};
handleDrawerToggle = () => {
this.setState({ mobileOpen: !this.state.mobileOpen });
};
render() {
const { classes } = this.props;
const drawer = (
<div>
<div className={classes.drawerHeader} />
<Divider />
<List>{mailFolderListItems}</List>
<Divider />
<List>{otherMailFolderListItems}</List>
</div>
);
return (
<div className={classes.root}>
<div className={classes.appFrame}>
<AppBar className={classes.appBar}>
<Toolbar>
<IconButton
color="contrast"
aria-label="open drawer"
onClick={this.handleDrawerToggle}
className={classes.navIconHide}
>
<MenuIcon />
</IconButton>
<Typography type="title" color="inherit" noWrap>
Responsive drawer
</Typography>
</Toolbar>
</AppBar>
<Hidden mdUp>
<Drawer
type="temporary"
open={this.state.mobileOpen}
classes={{
paper: classes.drawerPaper,
}}
onRequestClose={this.handleDrawerToggle}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
>
{drawer}
</Drawer>
</Hidden>
<Hidden mdDown implementation="css">
<Drawer
type="permanent"
open
classes={{
paper: classes.drawerPaper,
}}
>
{drawer}
</Drawer>
</Hidden>
<main className={classes.content}>
<Typography type="body1" noWrap>
{'You think water moves fast? You should see ice.'}
</Typography>
</main>
</div>
</div>
);
}
}
ResponsiveDrawer.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ResponsiveDrawer);
What is the best practice for specifying the props in the parent component? 在父级组件中指定道具的最佳实践是什么? Should I simply specify the className for each class in the parent component directly?
我是否应该直接为父组件中的每个类指定className? And what if I don't need a class name for a particular class?
如果我不需要特定班级的班级名称怎么办?
class App extends Component {
render() {
const classes = {
root: "bullet",
appFrame: "card",
...
};
return (
<div className="App">
<ResponsiveDrawer classes={classes} />
</div>
);
}
}
To customize styles of a material-ui react component you should follow the conventions described in they API for overrides . 要自定义material-ui react组件的样式,您应该遵循API中所述的覆盖规范。
For example, let's imagine you need need to change the color of a Button
, you could override the root
and label
classes. 例如,假设您需要更改
Button
的颜色,则可以覆盖root
和label
类。
Quick example: 快速示例:
const styles = { root: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', borderRadius: 3, border: 0, color: 'white', height: 48, padding: '0 30px', boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .30)', }, label: { textTransform: 'capitalize', }, };
So for customizing a component you should use style directly on the component it self. 因此,要自定义组件,您应该直接在其自身的组件上使用样式。 If instead you need adjust its positioning, for example, you could consider using a style in a parent component.
例如,如果相反需要调整其位置,则可以考虑在父组件中使用样式。 This have the advantage to make your components more reusable.
这具有使您的组件更可重用的优点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.