I have a component that relies on another component. I am trying to pass CSS positioning from the outer component to the inner one by using the following code:
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);
What's interesting is that when I wrap OptionsMenu in a div, the styling works as expected.
<Card>
...
<div className={classes.optionsPosition}>
<OptionsMenu />
</div>
</Card>
However, I would like to avoid adding an unnecessary div. Can anyone explain why OptionsMenu seems to ignore the provided styling?