为自定义 React 组件提供类名不起作用 [重复]

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 组件中，您可以使用此道具并将其作为className 应用于html DOM 元素（div/span 等）。

或者，在 Card 组件中，您可以将子 (OptionsMenu) 包装在具有相关类名的 div 中。