From 50d8914c3b43a5391604454f13a92fc6ccf25151 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 17 Apr 2024 16:31:07 +0700 Subject: [PATCH 001/112] add blog page --- docs/pages/blog/material-ui-v6-sneak-peek.js | 7 + docs/pages/blog/material-ui-v6-sneak-peek.md | 131 +++++++++++++++++++ 2 files changed, 138 insertions(+) create mode 100644 docs/pages/blog/material-ui-v6-sneak-peek.js create mode 100644 docs/pages/blog/material-ui-v6-sneak-peek.md diff --git a/docs/pages/blog/material-ui-v6-sneak-peek.js b/docs/pages/blog/material-ui-v6-sneak-peek.js new file mode 100644 index 00000000000000..1a6dca642cd923 --- /dev/null +++ b/docs/pages/blog/material-ui-v6-sneak-peek.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './material-ui-v6-sneak-peek.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/material-ui-v6-sneak-peek.md b/docs/pages/blog/material-ui-v6-sneak-peek.md new file mode 100644 index 00000000000000..726e5884fa238f --- /dev/null +++ b/docs/pages/blog/material-ui-v6-sneak-peek.md @@ -0,0 +1,131 @@ +--- +title: Material UI v6 Sneak Peek +description: Previewing all the major updates of Material UI v6. +date: 2024-04-17T00:00:00.000Z +authors: ['siriwatknp'] +tags: ['Material UI', 'Product'] +manualCard: true +--- + +Material UI v6 is coming soon! We're excited to share a sneak peek of all the major updates. + +## Opt-in CSS extraction via Pigment CSS + +As you know, Material UI v5 is using Emotion as a default styling solution. As a runtime CSS-in-JS library, it has several trade-offs such as slower performance and larger bundle size. + +In the upcoming v6, we're introducing an opt-in integration with Pigment CSS, our new open-source library, that will eliminate the overhead of style recalculation while preserving similar APIs that you are already familiar with. + +Since the integration is an opt-in feature, you can upgrade to v6 and continue using Emotion if you'd like. We will provide a migration guide to help you switch to Pigment CSS at your pace. + + + +## Theming + +### New API for dark mode + +The new API `theme.applyStyles()` has been added to unify all supporting styling solutions, including Emotion, Styled-components and Pigment CSS. + +```diff + const StyledInput = styled(InputBase)(({ theme }) => ({ + padding: 10, + width: '100%', +- borderBottom: `1px solid ${ +- theme.palette.mode === 'dark' ? '#30363d' : '#eaecef' +- }`, ++ borderBottom: `1px solid #eaecef`, ++ ...theme.applyStyles('dark', { ++ borderBottom: '1px solid #30363d', ++ }) + '& input': { + borderRadius: 4, +- backgroundColor: '#fff', ++ ...theme.applyStyles('dark', { ++ backgroundColor: '#0d1117', ++ }) + }, + })); +``` + +We are working on a codemod to help you migrate your existing codebase to this new API. + +### Container Queries + +We added support for [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) based on the existing `theme.breakpoints` API. + +This feature lets you define styles based on the width of the parent container instead of the viewport. + +```jsx +const Component = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(2), + [theme.containerQueries.up('sm')]: { + flexDirection: 'row', + }, + [theme.containerQueries('sidebar').up('400px')]: { + flexDirection: 'row', + }, +})); +``` + +It also works with the `sx` prop: + +```jsx + +``` + +## Stablizing CSS Theme Variables + +We introduced [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) in v5 as an experimental API. In v6, we are making it a stable API with two more additions: + +### Spacing + +The value from `theme.spacing()` will use the CSS variable `--mui-spacing` under the hood including `sx` values. + +```jsx +