how to add styles in jsx code example

Example 1: use styles in react

const useStyles = makeStyles(theme => ({
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    border: '1px solid red',
  },
}));
function App() {
  const classes = useStyles();
return (
    <TextField
      id="outlined-name"
      label="Name"
      className={classes.textField}
      margin="normal"
      variant="outlined"
    />
  );
}

Example 2: jsx inline css styling

// Best option (in my opinion) is to make a style object, similar to a CSS class
// This is especially useful when you want to use the style across multiple elements
// Another plus is being able to make a lot of these styles in a util file, and import as needed
// Keep in mind the CSS props need to be camel-cased

const box = {
  textAlign: 'center',
  borderStyle: 'double'
};
const text = {
  color: '#ff0000',
  backgroundColor: '#888888'
};

renderBox() {
  	return (
    	<div style={box}> <p style={text}>
      		This is just a box, no need to worry.
        </p> </div>
  	);
}

// The reason I prefer the above is readability and not as much duplication.
// Alternatively, you can hard-code the styling.
// Just remember, you're passing an object as the style prop.
// So, first curlies are to say "hey, this is JS, not html"
// Second curlies are to say "hey, this is an object"

renderBox() {
	return (
    	<div style={{textAlign:'center', borderStyle:'double'}}>
      		<p style={{color:'#ff0000', backgroundColor:'#888888'}}>
              	This is just a box, no need to worry.
            </p>
		</div>
	);
}