在反應中使用材料組件

Question

我一直在遵循Material UI Beta for react的指南，並希望使用抽屜製作一個簡單的組件。以下是官方文檔中指定如何創建組件的代碼。

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); 

指定父組件中道具的最佳做法是什麼？我應該直接爲父組件中的每個類指定className嗎？如果我不需要某個班級的班級名稱呢？

class App extends Component { 
    render() { 
    const classes = { 
     root: "bullet", 
     appFrame: "card", 
     ... 
    }; 
    return (
     <div className="App"> 
     <ResponsiveDrawer classes={classes} /> 



     </div> 
    ); 
    } 
} 

Answer 1

要自定義樣式的材料的UI組件的反應，你應該遵循描述他們的API overrides的約定。

例如，假設您需要更改Button的顏色，您可以覆蓋root和label類。

簡單的例子：

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', 
 
    }, 
 
};

因此，對於自定義，你應該直接在組件它自身使用樣式組件。例如，如果您需要調整其位置，則可以考慮在父組件中使用樣式。這有利於使您的組件更具可重用性。