Repository: mui/material-ui
File: docs/src/components/banner/AppHeaderBanner.tsx (TypeScript)

Code before:
import * as React from 'react';
import Typography from '@mui/material/Typography';
import Link from 'docs/src/modules/components/Link';
import ROUTES from 'docs/src/route';
import FEATURE_TOGGLE from 'docs/src/featureToggle';

export default function AppHeaderBanner() {
  return FEATURE_TOGGLE.enable_website_banner ? (
    <Typography
      fontWeight="medium"
      sx={{
        color: '#fff',
        p: 1.2,
        display: 'flex',
        flexDirection: { xs: 'column', md: 'row' },
        alignItems: { xs: 'start', sm: 'center' },
        justifyContent: 'center',
        background: (theme) =>
          theme.palette.mode === 'dark'
            ? `linear-gradient(90deg, ${theme.palette.primary[900]}, ${theme.palette.primary[600]} 120%)`
            : `linear-gradient(-90deg, ${theme.palette.primary[700]}, ${theme.palette.primary[500]} 120%)`,
        fontSize: (theme) => theme.typography.pxToRem(13),
      }}
    >
      🚀&#160;&#160;We&apos;re hiring a Designer, Full-stack Engineer, React Support Engineer, and
      more!&nbsp;&#160;
      <Link
        href={ROUTES.careers} // Fix me!
        target="_blank"
        data-ga-event-category="$event-category" // Fix me!
        data-ga-event-action="click"
        data-ga-event-label="header"
        sx={{
          fontWeight: 'semiBold',
          textDecoration: 'underline',
          color: '#fff',
          '&:hover': { color: 'grey.200' },
        }}

Review comment (bug):
I think that it would be great to have an eslint plugin to forbid this pattern. I think that only integer and half-integer make sense with the unitless API. It's effectively the same as https://stackoverflow.com/questions/54618144/tailwind-css-how-to-code-pixel-perfect-design. I think that it's a foot gun to have to reason about 1.2 of the space unit. While one or halt a space unit is easy to understand.

Code after:
import * as React from 'react';
import Typography from '@mui/material/Typography';
import Link from 'docs/src/modules/components/Link';
import ROUTES from 'docs/src/route';
import FEATURE_TOGGLE from 'docs/src/featureToggle';

export default function AppHeaderBanner() {
  return FEATURE_TOGGLE.enable_website_banner ? (
    <Typography
      fontWeight="medium"
      sx={{
        color: '#fff',
        p: '12px',
        display: 'flex',
        flexDirection: { xs: 'column', md: 'row' },
        alignItems: { xs: 'start', sm: 'center' },
        justifyContent: 'center',
        background: (theme) =>
          theme.palette.mode === 'dark'
            ? `linear-gradient(90deg, ${theme.palette.primary[900]}, ${theme.palette.primary[600]} 120%)`
            : `linear-gradient(-90deg, ${theme.palette.primary[700]}, ${theme.palette.primary[500]} 120%)`,
        fontSize: (theme) => theme.typography.pxToRem(13),
      }}
    >
      🚀&#160;&#160;We&apos;re hiring a Designer, Full-stack Engineer, React Support Engineer, and
      more!&nbsp;&#160;
      <Link
        href={ROUTES.careers} // Fix me!
        target="_blank"
        sx={{
          fontWeight: 'semiBold',
          textDecoration: 'underline',
          color: '#fff',
          '&:hover': { color: 'grey.200' },
        }}
      >
        Check the careers page →
      </Link>