Skip to content

Commit

Permalink
[docs] Improve the Getting Started documentation content (mui#30808)
Browse files Browse the repository at this point in the history
  • Loading branch information
mnajdova authored and wladimirguerra committed Feb 2, 2022
1 parent 1a4d3ef commit a1af3a8
Show file tree
Hide file tree
Showing 10 changed files with 105 additions and 252 deletions.

This file was deleted.

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -177,10 +177,6 @@ const StyledSlider = styled(Slider, {

{{"demo": "pages/customization/how-to-customize/DynamicCSSVariables.js"}}

### Theme nesting

{{"demo": "pages/customization/how-to-customize/DynamicThemeNesting.js"}}

## 4. Global theme variation

In order to promote consistency between components, and manage the user interface appearance as a whole, MUI provides a mechanism to apply global changes.
Expand Down Expand Up @@ -225,7 +221,3 @@ If you are already using the [CssBaseline](/components/css-baseline/) component
)
}
```

## 6. Custom class name

Check out [ClassName Generator](/guides/classname-generator/) section for more details.
25 changes: 1 addition & 24 deletions docs/src/pages/customization/theming/theming.md
Original file line number Diff line number Diff line change
Expand Up @@ -160,30 +160,7 @@ theme = createTheme(theme, {
});
```

Think of creating a theme as a two-step composition process: first, you define the basic design options; then, you'll use these design options to compose other options (example above) or to override the design of specific components (example below).

```js
import { createTheme } from '@mui/material/styles';

let theme = createTheme({
shape: {
borderRadius: 4,
},
});

theme = createTheme(theme, {
components: {
MuiChip: {
styleOverrides: {
root: {
// apply theme's border-radius instead of component's default
borderRadius: theme.shape.borderRadius,
},
},
},
},
});
```
Think of creating a theme as a two-step composition process: first, you define the basic design options; then, you'll use these design options to compose other options.

### `responsiveFontSizes(theme, options) => theme`

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ If you want to start with a more complete and real-world example, you could take
- All PWA features included (SW, Notifications, deferred installation prompt and more)
- Optimized and scalable performance (all ~100 points on Lighthouse)

<!-- TODO: revert this once it is migrated to v5
- [React SaaS Template](https://github.com/dunky11/react-saas-template):
- ![stars](https://img.shields.io/github/stars/dunky11/react-saas-template.svg?style=social&label=Star)
Expand All @@ -60,23 +61,17 @@ If you want to start with a more complete and real-world example, you could take
- Fully routed using react-router
- Lazy loads components to boost performance
- Components for statistics, text with emoji support, image upload and much more...
-->

<!-- TODO: revert this once it is migrated to v5
- [Material Sense](https://github.com/alexanmtz/material-sense):
- ![stars](https://img.shields.io/github/stars/alexanmtz/material-sense.svg?style=social&label=Star)
- Graph using recharts
- React Router included with a navigation example
- A docker container with an Nginx server for production build
- Created with Create React App

- [RMUIF](https://github.com/rmuif/web):

- ![stars](https://img.shields.io/github/stars/rmuif/web.svg?style=social&label=Star)
- Bootstrapped with Create React App
- Firebase back-end with most of their products for the web included, e.g., Authentication and Cloud Firestore
- Routing with React Router, including protected routes and error handling
- Extensive and well-tested mobile support with full-screen dialogs and swipeable tabs
- Cross-platform application monitoring with Sentry
-->

### Paid

Expand Down
Loading

0 comments on commit a1af3a8

Please sign in to comment.