Do I lose some technical benefit or is my code less reliable if I use material-css directly in my JSX rather than using a JSX specific library such as material-ui or react-toolbox? Or, conversely, do I gain performance, reliability or other measurable benefit by using a JSX library such as material-ui or react-toolbox rather than just putting materialize-css code in my JSX?
When writing React components, I find I can use materialize-css directly in my JSX:
<div className="row">
<div className="blue lighten-5 col s12 m1 l1">1</div>
</div>
<a className="waves-effect waves-light btn">Stuff</a>
Or I can use JSX specific library such as material-ui:
import RaisedButton from 'material-ui/RaisedButton';
...
<RaisedButton label="Submit" type="submit" primary={true} style={style}/>
I'm not asking "Which is your favorite library?". Nor am I asking "What is the difference in output between RaisedButton and a button with this style: 'waves-effect waves-light btn'.
I'm asking: do I gain technical benefits or increased reliability if I use material-ui or some similar JSX specific library compared to just putting materialize-css code in my JSX? If there are benefits or risks involved then what are they? What should I be looking for in the way of pitfalls?
For buttons, the difference is inconsequential, so it's no surprise you're not seeing the best path.
Where Material-UI wins out is in it's functional components. The DatePicker, AutoComplete, and Tabs jump out as the most obvious in these regards. MUI is built on react, and these functional elements are setup to be customized by your own events and handlers in a way that raw css just can't do.
The MUI library is also just much larger than the materialize library.