MUIのText-Inputを基幹システム風にカスタムしてみた

初めに

MUIのデフォのスタイルから、ざ・基幹システムって感じのNumber－Inputのスタイルを作ってみた

実装

"use client";
import React from "react";
import { TextField, createTheme, ThemeProvider } from "@mui/material";
import { grey } from "@mui/material/colors";
import zIndex from "@mui/material/styles/zIndex";

const theme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          "& .MuiInputAdornment-root button": {
            borderRadius: 0, // increment, decrementボタンの丸みをなくす
            color: grey[800], // ボタンの色を設定
            backgroundColor: grey[300], // ボタンの背景色を設定
            opacity: 1,
            zIndex: 1000,
            "&:hover": {
              backgroundColor: grey[800], // ホバー時の背景色をグレーにする
            },
            height: "50%", // ボタンの高さを調整
          },
          "& .MuiInputAdornment-root button:first-child": {
            borderTopRightRadius: 0, // incrementボタンの右上の丸みをなくす
            borderBottomRightRadius: 0, // incrementボタンの右下の丸みをなくす
          },
          "& .MuiInputAdornment-root button:last-child": {
            borderTopLeftRadius: 0, // decrementボタンの左上の丸みをなくす
            borderBottomLeftRadius: 0, // decrementボタンの左下の丸みをなくす
          },
          "&:hover .MuiOutlinedInput-notchedOutline": {
            borderColor: grey[500], // ホバー時の枠線の色をグレーにする
          },
        },
        notchedOutline: {
          borderRadius: 0, // 入力欄の丸みをなくす
        },
        input: {
          fontSize: 14,
          padding: "2px 0px 2px 2px",
        },
      },
    },
  },
});

export default function CustomNumberInput() {
  return (
    <ThemeProvider theme={theme}>
      <TextField
        type="number"
        InputProps={{ disableUnderline: true }} // 入力欄との隙間をなくす
        variant="outlined"
      />
    </ThemeProvider>
  );
}

まとめ

カスタムごちゃごちゃする