Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Improve the Getting Started documentation content #30808

Merged
merged 6 commits into from
Jan 31, 2022
Merged

[docs] Improve the Getting Started documentation content #30808

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cb46387
[docs] Improve the Getting Started documentation content
mnajdova Jan 27, 2022
d410dcf
Add the v4 tag first
mnajdova Jan 28, 2022
6b13a4b
Update docs/src/pages/getting-started/learn/learn.md
mnajdova Jan 28, 2022
38a763c
Update docs/src/pages/getting-started/installation/installation.md
mnajdova Jan 28, 2022
4e0d6dc
Update docs/src/pages/getting-started/faq/faq.md
mnajdova Jan 28, 2022
ce3e8fc
Benny's review
mnajdova Jan 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 0 additions & 48 deletions docs/src/pages/customization/how-to-customize/DynamicThemeNesting.js
View file
Open in desktop

This file was deleted.

48 changes: 0 additions & 48 deletions docs/src/pages/customization/how-to-customize/DynamicThemeNesting.tsx
View file
Open in desktop

This file was deleted.

16 changes: 0 additions & 16 deletions docs/src/pages/customization/how-to-customize/DynamicThemeNesting.tsx.preview
View file
Open in desktop

This file was deleted.

8 changes: 0 additions & 8 deletions docs/src/pages/customization/how-to-customize/how-to-customize.md
View file
Open in desktop
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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't recommend using nested themes for changing the look of the component based on prop. It is misleading. The nested theme has a different purpose, and it is described on different pages.


{{"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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not relevant here.


Check out [ClassName Generator](/guides/classname-generator/) section for more details.
25 changes: 1 addition & 24 deletions docs/src/pages/customization/theming/theming.md
View file
Open in desktop
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.
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We support now callbacks in the styleOverrides this is not an issue anymore.


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

Expand Down
13 changes: 4 additions & 9 deletions docs/src/pages/getting-started/example-projects/example-projects.md
View file
Open in desktop
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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's still using v4, we should not link it until it is upgraded. It is misleading for people first coming to the documentaiton.

- [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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here, still depends on v4.

- [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):
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not maintained anymore, depends on v4.


- ![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