tooltip
色変更
theme.js
"use client";
import { createTheme } from "@mui/material/styles";
import type {} from "@mui/lab/themeAugmentation";
const theme = createTheme({
components: {
MuiTooltip: {
styleOverrides: {
tooltip: {
backgroundColor: "black",
},
arrow: {
color: "black",
},
},
},
},
},
iconbutton
hover時の色変更
theme.js
components: {
MuiIconButton: {
styleOverrides: {
root: {
backgroundColor: "black",
"&:hover": {
color: "#fff",
},
},
},
},
},
menu
css勝手に追加される問題
これを無くす書き方をしたかったがどこでスタイリングされているのか突き止められなかった
同じ問題で困っていた人を発見しmenuが関係すると判明
https://github.com/mui/material-ui/issues/13594
打ち消すような書き方をすればいけるのでは？と書いてあったのでやってみたら無事解決
body {
padding: 0 !important;
overflow: auto !important;
}
実際に使用したコード
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="ja">
<head>
//省略
</head>
<body css={scrollBarStyle}>
//省略
</body>
</html>
);
}
//emotionでスタイリング
const scrollBarStyle = css`
padding: 0 !important;
overflow: auto !important;
}
`;
textfield
width,heightの変更
コンポーネントを使用するページファイルにて記述
emotion/reactで記述
const textfieldStyle = css`
width: ${width}px;
& .MuiInputBase-root {
height: ${height}px;
}
`;