How to override Material UI styles using classes using Emiotion - css

Question

I am trying to override the default styles in a Mui component using the classes prop and passing the css into it. So far I have been unsuccessful and I'm not sure what I have wrong.
The motivation for not using makeStyles is to keep our files cleaner and Emotion is faster.
I am able to do it successfully using makeStyles like this:
import { css } from '#emotion/react';
import HelpIcon from '#material-ui/icons/Help';
import { Tooltip } from '#material-ui/core';
import ClickAwayListener from '#material-ui/core/ClickAwayListener';
import { useState } from 'react';
import { cbNeutral } from '../../src/theme/palette';
import { makeStyles } from '#material-ui/core/styles';
import PropTypes from 'prop-types';
const useStyles = makeStyles(() => ({
arrow: {
'&:before': {
border: `1px solid ${cbNeutral[900]}`
},
color: cbNeutral[1000]
},
tooltip: {
backgroundColor: cbNeutral[1000],
border: `1px solid ${cbNeutral[900]}`,
color: cbNeutral[400],
boxShadow: '0px 8px 16px 0px rgba(14, 13, 38, 0.12)',
maxWidth: '385px',
fontSize: '1.125rem',
padding: '18px 25px',
fontWeight: 400
},
root: {
fill: cbNeutral[700],
'&:hover': {
fill: cbNeutral[400],
cursor: 'pointer'
}
}
}));
const ToolTip = ({ text }) => {
const styles = useStyles();
const [open, setOpen] = useState(false);
return (
<ClickAwayListener onClickAway={() => setOpen(false)}>
<Tooltip
arrow
title={text}
placement="right-start"
open={open}
classes={{
arrow: styles.arrow,
tooltip: styles.tooltip
}}
>
<HelpIcon onClick={() => setOpen(true)} classes={{ root: styles.root }} />
</Tooltip>
</ClickAwayListener>
);
};
export default ToolTip;
ToolTip.propTypes = {
text: PropTypes.string.isRequired
};
I am trying to do it with Emotion like this:
import { css } from '#emotion/react';
import HelpIcon from '#material-ui/icons/Help';
import { Tooltip } from '#material-ui/core';
import ClickAwayListener from '#material-ui/core/ClickAwayListener';
import { useState } from 'react';
import { cbNeutral } from '../../src/theme/palette';
import { makeStyles } from '#material-ui/core/styles';
import PropTypes from 'prop-types';
const toolTipCss = css`
.arrow {
color: ${cbNeutral[1000]};
&:before {
border: 1px solid ${cbNeutral[900]};
}
}
.tooltip {
background-color: ${cbNeutral[1000]};
border: 1px solid ${cbNeutral[900]};
color: cbNeutral[400];
box-shadow: 0px 8px 16px 0px rgba(14, 13, 38, 0.12);
max-width: 385px;
font-size: 1.125rem;
padding: 18px 25px;
font-weight: 400;
}
.help-icon {
fill: ${cbNeutral[700]};
&:hover {
fill: ${cbNeutral[400]};
cursor: pointer;
}
}
`;
const ToolTip = ({ text }) => {
const [open, setOpen] = useState(false);
return (
<div css={toolTipCss}>
<ClickAwayListener onClickAway={() => setOpen(false)}>
<Tooltip
arrow
title={text}
placement="right-start"
open={open}
classes={{
arrow: 'arrow',
tooltip: 'tooltip'
}}
>
<HelpIcon onClick={() => setOpen(true)} className="help-icon" />
</Tooltip>
</ClickAwayListener>
</div>
);
};
export default ToolTip;
ToolTip.propTypes = {
text: PropTypes.string.isRequired
};
In 👆 that version where I use className="help-icon", it works as expected, but classes={{arrow: 'arrow', tooltip: 'tooltip'}} does not change the default MUI styles.
I am using these versions of MUI and Emotion
"#emotion/react": "^11.4.0",
"#material-ui/core": "^4.11.4",
I know we have it working like this in another app using older versions of MUI and emotion. I don't know if something has changed in the mean time or of I just have something wrong with my syntax. Any help would be appreciated.