Material-UI ListItem Component for Right Toggle - reactjs

Question

This seems so basic that I feel I must be misunderstanding how it works. I have a simple demo component that renders a material-ui List with three ListItems. Each list item has a toggle on the right hand side implemented using the rightToggle prop. For the purposes of demonstration each toggle is generated differently.
The first is a basic material-ui Toggle component. The second is a custom component wrapping a Toggle and the third is generated by a function call.
Some code:
import React from 'react';
import Paper from 'material-ui/Paper';
import { List, ListItem } from 'material-ui/List';
import Toggle from 'material-ui/Toggle';
import MyToggleComponent from './MyToggleComponent';
const myToggleFunction = id => <Toggle onClick={() => console.log(id)} />;
const TestPage = () =>
<div>
<Paper style={{ width: 500, padding: 15, margin: 25 }}>
<List>
<ListItem
primaryText="This is the first list item"
secondaryText="This toggle for this item is directly defined"
rightToggle={<Toggle onClick={() => console.log('1 - clicked')} />}
/>
<ListItem
primaryText="This is the second list item"
secondaryText="This toggle is generated from a component"
rightToggle={<MyToggleComponent text="2 - clicked" />}
/>
<ListItem
primaryText="This is the third list item"
secondaryText="This toggle is generated programatically"
rightToggle={myToggleFunction('3 - clicked')}
/>
</List>
</Paper>
</div>;
export default TestPage;
and the custom component - very basic
import React from 'react';
import PropTypes from 'prop-types';
import Toggle from 'material-ui/Toggle';
const MyToggleComponent = ({ text }) => <Toggle onClick={() => console.log(text)} />;
MyToggleComponent.propTypes = {
text: PropTypes.string.isRequired,
};
export default MyToggleComponent;
Results in:
All three toggles generate the expected console output. The first and third items render as I would expect with a Toggle to the right of the list item. But the second, using a custom component, renders the Toggle above the list item. Can anyone explain why?

Answer 1

Material-UI is cloning these elements under the hood and is adding/injecting a prop style. In the first and third example the actual values are the Material UI defined components that accept a property style as documented here. Your own defined component however only passes the text property and does nothing with style.
So comes down to that all 3 examples get passed a style prop but only the first and third do something with it. To bad this wasn't well documented.
It kinda does say it needs to be a Toggle element and your own component isn't one because it wraps the Toggle component.
pushElement(children, element, baseStyles, additionalProps) {
if (element) {
const styles = Object.assign({}, baseStyles, element.props.style);
children.push(
React.cloneElement(element, { // element is your own defined component
key: children.length,
style: styles, // here the style property is passed
...additionalProps, // your text property is passed here
})
);
}
}
source
So to fix this change:
const MyToggleComponent = ({ text }) => <Toggle onClick={() => console.log(text)} />;
to:
const MyToggleComponent = ({ text, style }) =>
<Toggle style={style} onClick={() => console.log(text)} />;