Is there a difference in technical benefits or code reliability when directly using material-css in JSX versus utilizing JSX specific libraries like material-ui or react-toolbox? Conversely, could using JSX libraries like material-ui or react-toolbox provide performance enhancements, improved reliability, or other measurable advantages compared to incorporating materialize-css code directly into JSX?
When creating React components, I have the option to include 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>
Alternatively, I can choose to use a JSX specific library like material-ui:
import RaisedButton from 'material-ui/RaisedButton';
...
<RaisedButton label="Submit" type="submit" primary={true} style={style}/>
This inquiry is not about personal preference of libraries or distinguishing between output differences. The question at hand is: are there technical advantages or increased reliabilities by opting for material-ui or similar JSX libraries as opposed to inserting materialize-css code directly into JSX? If there are potential benefits or risks involved, what are they? What precautions should be taken into consideration?