Question

我有一些使用其他组件的组件。我希望外部组件为内部组件提供位置CSS，因此我尝试执行以下操作：

import OptionsMenu from './OptionsMenu'
import { withStyles } from 'material-ui/styles';

const styles = theme => ({
  optionsPosition: {
    position: 'absolute',
    right: 0,
    top: 0
  }
});


class Modal extends React.Component {
  render() {
    const { classes } = this.props;

    return (
      <Card>
        ...
        <OptionsMenu className={classes.optionsPosition}/>
      </Card>
    )
  }
}

export default withStyles(styles)(Modal);

奇怪的是，当我将OptionsMenu包裹在div中时，className正在工作

<Card>
  ...
  <div className={classes.optionsPosition}>
    <OptionsMenu />
  </div>
</Card>

但我想避免不必要的div并理解为什么OptionsMenu会忽略样式？

Answer 1

在输入<OptionsMenu className={classes.optionsPosition}/>时，您只是声明向OptionsMenu组件发送了一个名为className的道具，其价值为classes.optionsPosition。

在OptionsMenu组件中，您可以使用此prop并将其作为className应用于html DOM元素（div / span等）。

或者，在Card组件中，您可以将子项（OptionsMenu）包装在具有相关className的div中。

将className赋予自定义React组件不起作用

1 个答案: