Material UI の styled() ユーティリティは CSS を直接書く実装もできる

@mui/styles が MUI v5 で legacy になったという事で、@mui/system について少し調べた時の memo.

createTheme, ThemeProvider を利用している想定の場合、公式のサンプルコードの通りこんな形となる。
​

import * as React from 'react';
import { styled, createTheme, ThemeProvider } from '@mui/system';
​
const Logo = styled('img')(({ theme }) => ({
 height: '32px',
}));

backtick（`） を利用すると、CSS がそのまま記述できる。

const Logo = styled('img')(
 ({ theme }) => `
 height: 32px;
`,
);

どちらかで揃えたいですね。

参考