Material-UI Next中如何将样式传递给子组件？

嘿，我来帮你搞定这个问题！看起来你想让子组件的文本用上父组件里定义的橙色常量，但用withStyles的时候遇到了样式不生效的情况。这通常要么是样式传递的方式不对，要么是Material-UI组件的默认样式优先级更高导致的。我给你几个可行的解决方案：

方案1：通过Props传递颜色常量给子组件 #

这种方式适合只在父-子组件之间传递颜色的场景，直接把父组件的颜色常量通过props传给子组件，子组件用withStyles接收并应用到Typography上。

父组件代码 #

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Card, { CardActions, CardContent } from 'material-ui/Card';
import Button from 'material-ui/Button';
import ChildComponent from './ChildComponent';

// 定义适配Material-UI的橙色常量
const COLORS = {
  orange: '#ff9800'
};

const styles = {
  card: {
    maxWidth: 345,
  },
};

class ParentComponent extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <Card className={classes.card}>
        <CardContent>
          {/* 把橙色常量作为props传给子组件 */}
          <ChildComponent textColor={COLORS.orange} />
        </CardContent>
        <CardActions>
          <Button size="small">Learn More</Button>
        </CardActions>
      </Card>
    );
  }
}

ParentComponent.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ParentComponent);

子组件代码 #

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Typography from 'material-ui/Typography';

const styles = {
  // 通过props参数获取父组件传递的颜色值
  orangeText: {
    color: props => props.textColor,
  },
};

const ChildComponent = ({ classes }) => (
  <Typography className={classes.orangeText} variant="body1">
    这段文本应该显示为橙色啦！
  </Typography>
);

ChildComponent.propTypes = {
  classes: PropTypes.object.isRequired,
  textColor: PropTypes.string.isRequired,
};

export default withStyles(styles)(ChildComponent);

方案2：用Material-UI主题统一管理颜色 #

如果你希望这个橙色能在多个组件里复用，更优雅的方式是把它加到Material-UI的主题中，所有组件都能直接引用这个全局颜色。

父组件（带主题配置） #

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, createMuiTheme, MuiThemeProvider } from 'material-ui/styles';
import Card, { CardActions, CardContent } from 'material-ui/Card';
import Button from 'material-ui/Button';
import ChildComponent from './ChildComponent';

// 自定义主题，添加橙色常量到调色板
const customTheme = createMuiTheme({
  palette: {
    customOrange: '#ff9800',
  },
});

const styles = {
  card: {
    maxWidth: 345,
  },
};

class ParentComponent extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <MuiThemeProvider theme={customTheme}>
        <Card className={classes.card}>
          <CardContent>
            <ChildComponent />
          </CardContent>
          <CardActions>
            <Button size="small">Learn More</Button>
          </CardActions>
        </Card>
      </MuiThemeProvider>
    );
  }
}

ParentComponent.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ParentComponent);

子组件（引用主题颜色） #

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Typography from 'material-ui/Typography';

const styles = theme => ({
  orangeText: {
    // 直接从主题调色板里取自定义橙色
    color: theme.palette.customOrange,
  },
});

const ChildComponent = ({ classes }) => (
  <Typography className={classes.orangeText} variant="body1">
    这段文本也会是橙色的！
  </Typography>
);

ChildComponent.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ChildComponent);

为什么之前的方法可能不生效？ #

• 你可能尝试直接在子组件里写死颜色，但Material-UI的Typography组件有默认的color样式，优先级可能比你的自定义样式高。上面的方案通过正确传递样式类，确保了自定义样式的优先级足够覆盖默认样式。
• 另一种可能是你没有把父组件的颜色常量正确传递给子组件，导致子组件无法获取到这个颜色值。

内容的提问来源于stack exchange，提问作者Yuval Eliav