From 2559c6f74dce4a61507acb30ffaca8a283823428 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 3 Feb 2025 15:28:02 +0700 Subject: [PATCH 01/11] duplicate overriding-component-structure to material-ui --- .../OverridingInternalSlot.js | 38 ++++++++ .../OverridingInternalSlot.tsx | 37 ++++++++ .../OverridingInternalSlot.tsx.preview | 13 +++ .../OverridingRootSlot.js | 15 +++ .../OverridingRootSlot.tsx | 15 +++ .../OverridingRootSlot.tsx.preview | 8 ++ .../overriding-component-structure.md | 94 +++++++++++++++++++ docs/data/material/pages.ts | 1 + .../overriding-component-structure.js | 7 ++ 9 files changed, 228 insertions(+) create mode 100644 docs/data/material/customization/overriding-component-structure/OverridingInternalSlot.js create mode 100644 docs/data/material/customization/overriding-component-structure/OverridingInternalSlot.tsx create mode 100644 docs/data/material/customization/overriding-component-structure/OverridingInternalSlot.tsx.preview create mode 100644 docs/data/material/customization/overriding-component-structure/OverridingRootSlot.js create mode 100644 docs/data/material/customization/overriding-component-structure/OverridingRootSlot.tsx create mode 100644 docs/data/material/customization/overriding-component-structure/OverridingRootSlot.tsx.preview create mode 100644 docs/data/material/customization/overriding-component-structure/overriding-component-structure.md create mode 100644 docs/pages/material-ui/customization/overriding-component-structure.js diff --git a/docs/data/material/customization/overriding-component-structure/OverridingInternalSlot.js b/docs/data/material/customization/overriding-component-structure/OverridingInternalSlot.js new file mode 100644 index 00000000000000..b1a5abe24c76b7 --- /dev/null +++ b/docs/data/material/customization/overriding-component-structure/OverridingInternalSlot.js @@ -0,0 +1,38 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import Box from '@mui/material/Box'; +import Autocomplete from '@mui/material/Autocomplete'; +import TextField from '@mui/material/TextField'; + +function PopperComponent(props) { + const { disablePortal, anchorEl, open, ...other } = props; + return
; +} + +PopperComponent.propTypes = { + anchorEl: PropTypes.any, + disablePortal: PropTypes.bool, + open: PropTypes.bool.isRequired, +}; + +export default function OverridingInternalSlot() { + return ( + + } + slots={{ + popper: PopperComponent, + }} + /> + + ); +} diff --git a/docs/data/material/customization/overriding-component-structure/OverridingInternalSlot.tsx b/docs/data/material/customization/overriding-component-structure/OverridingInternalSlot.tsx new file mode 100644 index 00000000000000..130849225f3b76 --- /dev/null +++ b/docs/data/material/customization/overriding-component-structure/OverridingInternalSlot.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Autocomplete from '@mui/material/Autocomplete'; +import TextField from '@mui/material/TextField'; + +interface PopperComponentProps { + anchorEl?: any; + disablePortal?: boolean; + open: boolean; +} + +function PopperComponent(props: PopperComponentProps) { + const { disablePortal, anchorEl, open, ...other } = props; + return
; +} + +export default function OverridingInternalSlot() { + return ( + + } + slots={{ + popper: PopperComponent, + }} + /> + + ); +} diff --git a/docs/data/material/customization/overriding-component-structure/OverridingInternalSlot.tsx.preview b/docs/data/material/customization/overriding-component-structure/OverridingInternalSlot.tsx.preview new file mode 100644 index 00000000000000..a68692a51edcfd --- /dev/null +++ b/docs/data/material/customization/overriding-component-structure/OverridingInternalSlot.tsx.preview @@ -0,0 +1,13 @@ + } + slots={{ + popper: PopperComponent, + }} +/> \ No newline at end of file diff --git a/docs/data/material/customization/overriding-component-structure/OverridingRootSlot.js b/docs/data/material/customization/overriding-component-structure/OverridingRootSlot.js new file mode 100644 index 00000000000000..e99eba057c7859 --- /dev/null +++ b/docs/data/material/customization/overriding-component-structure/OverridingRootSlot.js @@ -0,0 +1,15 @@ +import * as React from 'react'; +import Button from '@mui/material/Button'; + +export default function OverridingRootSlot() { + return ( + + ); +} diff --git a/docs/data/material/customization/overriding-component-structure/OverridingRootSlot.tsx b/docs/data/material/customization/overriding-component-structure/OverridingRootSlot.tsx new file mode 100644 index 00000000000000..e99eba057c7859 --- /dev/null +++ b/docs/data/material/customization/overriding-component-structure/OverridingRootSlot.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import Button from '@mui/material/Button'; + +export default function OverridingRootSlot() { + return ( + + ); +} diff --git a/docs/data/material/customization/overriding-component-structure/OverridingRootSlot.tsx.preview b/docs/data/material/customization/overriding-component-structure/OverridingRootSlot.tsx.preview new file mode 100644 index 00000000000000..e93e04b530fd7c --- /dev/null +++ b/docs/data/material/customization/overriding-component-structure/OverridingRootSlot.tsx.preview @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/docs/data/material/customization/overriding-component-structure/overriding-component-structure.md b/docs/data/material/customization/overriding-component-structure/overriding-component-structure.md new file mode 100644 index 00000000000000..71dca84b9b494c --- /dev/null +++ b/docs/data/material/customization/overriding-component-structure/overriding-component-structure.md @@ -0,0 +1,94 @@ +# Overriding component structure + +

Learn how to override the default DOM structure of Material UI components.

+ +Material UI components are designed to suit the widest possible range of use cases, but you may occasionally need to change how a component's structure is rendered in the DOM. + +To understand how to do this, it helps to have an accurate mental model of the components. + +## The mental model + +A component's structure is determined by the elements that fill that component's **slots**. +Slots are most commonly filled by HTML tags, but may also be filled by React components. + +All components contain a root slot that defines their primary node in the DOM tree; more complex components also contain additional interior slots named after the elements they represent. + +All _non-utility_ Material UI components accept two props for overriding their rendered HTML structure: + +- `component`—to override the root slot +- `slots`—to replace any interior slots (when present) as well as the root + +Additionally, you can pass custom props to interior slots using `slotProps`. + +## The root slot + +The root slot represents the component's outermost element. It is filled by a styled component with an appropriate HTML element. + +For example, the [Button's](/material-ui/react-button/) root slot is a `