My journey from CSS Modules to CSS-in-JS

// MyIcon.tsx
import * as React from 'react';
import IconButton from '@material-ui/core/IconButton';
import Close from '@material-ui/icons/Close';
import * as styles from './MyIcon.module.scss';
const MyIcon: React.FunctionComponent = () => (
<IconButton className={styles.button}>
<Close />
</IconButton>
);
export default MyIcon;// MyIcon.module.scss
.button {
padding: 0 0.5em !important;
color: purple !important;
min-width: 0;
}
// MyIcon.module.scss.d.ts
export const button: string;
padding and colour of `button` get overridden
// MyIcon.tsx
import * as React from 'react';
import IconButton from '@material-ui/core/IconButton';
import Close from '@material-ui/icons/Close';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
root: {
padding: '0 0.5em',
color: 'purple',
minWidth: 0,
},
});
const MyIcon: React.FunctionComponent = () => {
const classes = useStyles();
return (
<IconButton className={classes.root}>
<Close />
</IconButton>
);
};
export default MyIcon;

And more studies came

The above example code shows how to use JSS in React functional component, but it won’t work with the React class component, because makeStyles generates a hook, which can only be called inside a functional component. So how to use JSS for the class component?

import * as React from 'react';
import IconButton from '@material-ui/core/IconButton';
import Close from '@material-ui/icons/Close';
import { withStyles, WithStyles } from '@material-ui/core/styles';
const myStyles = () => {
return {
root: {
padding: '0 0.5em',
color: 'purple',
minWidth: 0,
},
};
};
class MyIcon extends React.Component<WithStyles> {
constructor(props: WithStyles) {
super(props);
}
public render() {
const { classes } = this.props;
return (
<IconButton className={classes.root}>
<Close />
</IconButton>
);
}
}
export default withStyles(myStyles)(MyIcon);
import * as React from 'react';
import IconButton from '@material-ui/core/IconButton';
import Close from '@material-ui/icons/Close';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
root: {
padding: '0 0.5em',
color: 'purple',
minWidth: 0,
'&:hover': {
cursor: 'pointer',
backgroundColor: 'orange',
},
},
});
const MyIcon: React.FunctionComponent = () => {
const classes = useStyles();
return (
<div className={classes.root}>
<Close />
</div>
);
};
export default MyIcon;
import * as React from 'react';
import IconButton from '@material-ui/core/IconButton';
import Close from '@material-ui/icons/Close';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
root: {
padding: '0 0.5em',
color: 'purple',
minWidth: 0,
'& label': {
textTransform: 'uppercase',
},
},
});
const MyIcon: React.FunctionComponent = () => {
const classes = useStyles();
return (
<IconButton className={classes.root}>
<label>close</label>
<Close />
</IconButton>
);
};
export default MyIcon;

A digital poet, casual gamer, ex-YouTuber, baseball fan, Dr.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store