Create your own themeable component with Joy UI theming feature.
+Learn how to create fully custom components that accept your app's theme.
## Introduction diff --git a/docs/data/material/guides/themeable-component/StatComponent.js b/docs/data/material/guides/creating-themed-components/StatComponent.js similarity index 100% rename from docs/data/material/guides/themeable-component/StatComponent.js rename to docs/data/material/guides/creating-themed-components/StatComponent.js diff --git a/docs/data/material/guides/themeable-component/StatFullTemplate.js b/docs/data/material/guides/creating-themed-components/StatFullTemplate.js similarity index 100% rename from docs/data/material/guides/themeable-component/StatFullTemplate.js rename to docs/data/material/guides/creating-themed-components/StatFullTemplate.js diff --git a/docs/data/material/guides/themeable-component/StatFullTemplate.tsx b/docs/data/material/guides/creating-themed-components/StatFullTemplate.tsx similarity index 100% rename from docs/data/material/guides/themeable-component/StatFullTemplate.tsx rename to docs/data/material/guides/creating-themed-components/StatFullTemplate.tsx diff --git a/docs/data/material/guides/themeable-component/StatFullTemplate.tsx.preview b/docs/data/material/guides/creating-themed-components/StatFullTemplate.tsx.preview similarity index 100% rename from docs/data/material/guides/themeable-component/StatFullTemplate.tsx.preview rename to docs/data/material/guides/creating-themed-components/StatFullTemplate.tsx.preview diff --git a/docs/data/material/guides/themeable-component/StatSlots.js b/docs/data/material/guides/creating-themed-components/StatSlots.js similarity index 100% rename from docs/data/material/guides/themeable-component/StatSlots.js rename to docs/data/material/guides/creating-themed-components/StatSlots.js diff --git a/docs/data/material/guides/themeable-component/themeable-component.md b/docs/data/material/guides/creating-themed-components/creating-themed-components.md similarity index 96% rename from docs/data/material/guides/themeable-component/themeable-component.md rename to docs/data/material/guides/creating-themed-components/creating-themed-components.md index 0469f74031e334..5975c8d88da5c1 100644 --- a/docs/data/material/guides/themeable-component/themeable-component.md +++ b/docs/data/material/guides/creating-themed-components/creating-themed-components.md @@ -1,12 +1,12 @@ -# Themeable component +# Creating themed components -Create your own themeable component with Material UI theming feature.
+Learn how to create fully custom components that accept your app's theme.
## Introduction Material UI provides a powerful theming feature that lets you add your own components to the theme and treat them as if they're built-in components. -If you are building a component library on top of Joy UI, you can follow the step-by-step guide below to create a custom component that is themeable across multiple projects. +If you are building a component library on top of Material UI, you can follow the step-by-step guide below to create a custom component that is themeable across multiple projects. Alternatively, you can use the provided [template](#template) as a starting point for your component. @@ -16,7 +16,7 @@ You don't need to connect your component to the theme if you are only using it i ## Step-by-step guide -This guide will walk you through how to build this statistics component, which accepts the app's theme as though it were a built-in Joy UI component: +This guide will walk you through how to build this statistics component, which accepts the app's theme as though it were a built-in Material UI component: {{"demo": "StatComponent.js", "hideToolbar": true}} diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts index 38040df6ad46f5..9c070c672d4a5a 100644 --- a/docs/data/material/pages.ts +++ b/docs/data/material/pages.ts @@ -181,7 +181,10 @@ const pages: MuiPage[] = [ title: 'How-to guides', children: [ { pathname: '/material-ui/guides/api', title: 'API design approach' }, - { pathname: '/material-ui/guides/themeable-component', title: 'Themeable component' }, + { + pathname: '/material-ui/guides/creating-themed-components', + title: 'Creating themed components', + }, { pathname: '/material-ui/guides/understand-mui-packages', title: 'Understand MUI packages' }, { pathname: '/material-ui/guides/typescript', title: 'TypeScript' }, { pathname: '/material-ui/guides/interoperability', title: 'Style library interoperability' }, diff --git a/docs/pages/material-ui/guides/themeable-component.js b/docs/pages/material-ui/guides/creating-themed-components.js similarity index 58% rename from docs/pages/material-ui/guides/themeable-component.js rename to docs/pages/material-ui/guides/creating-themed-components.js index e7c2472aa29d84..1fc92e78fa2163 100644 --- a/docs/pages/material-ui/guides/themeable-component.js +++ b/docs/pages/material-ui/guides/creating-themed-components.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/guides/themeable-component/themeable-component.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/guides/creating-themed-components/creating-themed-components.md?@mui/markdown'; export default function Page() { return