カスタムReactコンポーネントにclassNameを渡すことができません

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

奇妙なことがclassNameが

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

の作品、私はdiv要素で OptionsMenuをラップする場合ということです

しかし、私は不必要なdivを避け、OptionsMenuはスタイリングを無視するのはなぜですか？

Answer 1

と入力すると、OptionsMenuコンポーネントにclasses.optionsPositionの値を持つclassNameという名前の小道具が送信されると宣言するだけです。

OptionsMenuコンポーネントでは、この小道具を使用してhtml DOM要素（div/spanなど）のclassNameとして適用できます。

または、Cardコンポーネントでは、関連するclassNameでdiv内の子（OptionsMenu）をラップすることができます。