Component Overrides

เพิ่มเข้า components key ของ createTheme() จาก MUI Theme

theme.ts (ต่อ)

export const bgrimmTheme = createTheme({
  // ...palette, typography จากหน้าก่อน
  components: {
    MuiButton: {
      styleOverrides: {
        root: { borderRadius: 8, fontWeight: 700 },
        containedPrimary: {
          color: '#FFFFFF',
          '&:hover': { backgroundColor: '#C43400' }, // primary-hover token — ต้อง override เอง MUI ไม่ auto-darken ตรงตาม token ของเรา
        },
        outlinedPrimary: {
          color: '#C43400', // ใช้ Dark Orange ไม่ใช่ Primary Orange เพราะเป็นตัวอักษรขนาดเล็ก
          borderColor: '#FF6727',
        },
      },
    },
    MuiCard: {
      styleOverrides: {
        root: {
          borderRadius: 16,
          border: '1px solid #D9DAE4',
          boxShadow: '0 1px 2px rgba(32, 33, 36, 0.06)', // elevation.1 — ไม่ใช้ elevation prop แบบ default ของ MUI ที่เงาหนักเกิน
        },
      },
    },
    MuiTextField: {
      defaultProps: { variant: 'outlined' },
    },
  },
});

จุดที่ต้องระวัง Contrast เวลา Override สี Default ของ MUI

MUI สร้างสี hover/disabled แบบอัตโนมัติจาก palette.primary.main ด้วยการปรับ opacity/lighten-darken ของตัวเอง (theme.palette.action) — ค่าที่ MUI generate เองมักไม่ตรงกับ contrast ที่ B.Grimm กำหนดไว้

จุดเสี่ยง	ปัญหา	ทางแก้
containedPrimary hover	MUI จะ darken #FF6727 เองด้วยสูตรภายใน ซึ่งอาจไม่ตรงกับ #C43400 (Dark Orange) ที่แบรนด์กำหนด	Override &:hover ตรงๆ ตามตัวอย่างด้านบน ห้ามปล่อยให้ MUI คำนวณเอง
Chip/Alert ที่ใช้ color="warning"	สี warning default ของ MUI เป็นสีเหลือง/ส้มคนละเฉดกับ B.Grimm accent yellow/orange	ถ้าต้องใช้ ให้ map เข้า palette.warning ด้วย hex ของแบรนด์แทนค่า default
ตัวอักษรบน primary.light (#FF9956)	Contrast บนขาวต่ำกว่า primary.main อีก (~2.2:1)	ห้ามใช้ primary.light เป็นพื้นหลังปุ่มที่มีตัวอักษรอ่าน — ใช้เป็น decorative/background accent เท่านั้น (ดู Accessibility & Contrast)

เช็ค contrast จริงทุกครั้งหลัง override ด้วยเครื่องมือจริง ไม่พึ่งการคำนวณอัตโนมัติของ MUI