Skip to content

Commit

Permalink
[docs] refine links pointing to standardized examples
Browse files Browse the repository at this point in the history
  • Loading branch information
emmanuel-ferdman committed Sep 21, 2023
1 parent 9a54ab9 commit 916b760
Show file tree
Hide file tree
Showing 17 changed files with 35 additions and 35 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -489,4 +489,4 @@ These are the things we covered in this guide:
✅ How to create custom components for specific slots in more complex customization scenarios. We used the `component` prop to pass them into the parent component.\
✅ How to apply conditional styling based on the owner component's state using a callback as value for the `componentsProps` prop.

Get all the code used in this guide in the [Base UI with Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/base-ui-cra-tailwind-ts) example project.
Get all the code used in this guide in the [Base UI with Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/base-ui-cra-ts) example project.
Original file line number Diff line number Diff line change
Expand Up @@ -489,4 +489,4 @@ These are the things we covered in this guide:
✅ How to create custom components for specific slots in more complex customization scenarios. We used the `component` prop to pass them into the parent component.\
✅ How to apply conditional styling based on the owner component's state using a callback as value for the `componentsProps` prop.

Get all the code used in this guide in the [Base UI with Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/base-cra-ts) example project.
Get all the code used in this guide in the [Base UI with Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/base-ui-cra-ts) example project.
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@

- [Next.js](https://github.com/mui/material-ui/tree/next/examples/nextjs)[TypeScript 版本](https://github.com/mui/material-ui/tree/next/examples/nextjs-with-typescript)
- [Create React App](https://github.com/mui/material-ui/tree/next/examples/create-react-app)[TypeScript 版本](https://github.com/mui/material-ui/tree/next/examples/create-react-app-with-typescript)
- [Remix](https://github.com/mui/material-ui/tree/master/examples/material-remix-ts)
- [Gatsby](https://github.com/mui/material-ui/tree/master/examples/material-gatsby)
- [Preact](https://github.com/mui/material-ui/tree/master/examples/material-preact)
- [CDN](https://github.com/mui/material-ui/tree/master/examples/material-via-cdn)
- [Plain server-side](https://github.com/mui/material-ui/tree/master/examples/material-express-ssr)
- [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-cra-tailwind-ts)
- [Remix](https://github.com/mui/material-ui/tree/master/examples/material-ui-remix-ts)
- [Gatsby](https://github.com/mui/material-ui/tree/master/examples/material-ui-gatsby)
- [Preact](https://github.com/mui/material-ui/tree/master/examples/material-ui-preact)
- [CDN](https://github.com/mui/material-ui/tree/master/examples/material-ui-via-cdn)
- [Plain server-side](https://github.com/mui/material-ui/tree/master/examples/material-ui-express-ssr)
- [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts)
- [Vite.js](https://github.com/mui/material-ui/tree/master/examples/material-vite)
- [Use styled-components as style engine](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components-ts))
- [Next.js + @mui/styles (v4 migration helper)](https://github.com/mui/material-ui/tree/master/examples/material-next-ts-v4-v5-migration)
- [Use styled-components as style engine](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts))
- [Next.js + @mui/styles (v4 migration helper)](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts-v4-v5-migration)

Create React App 是一个很棒的学习 React 的项目。 Have a look at [the alternatives available](https://github.com/facebook/create-react-app/blob/HEAD/README.md#popular-alternatives) to see which project best fits your needs.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -295,8 +295,8 @@ If, however, you would like to use styled-components, you can configure your app

<!-- #default-branch-switch -->

- [Create React App with styled-components](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components)
- [Create React App with styled-components and typescript](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components-ts)
- [Create React App with styled-components](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts)
- [Create React App with styled-components and typescript](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts)

After the style engine is configured properly, you can use the [`styled()`](/system/styled/) utility from `@material-ui/core/styles` and have direct access to the theme.

Expand Down Expand Up @@ -599,7 +599,7 @@ It works exactly like styled components. You can [use the same guide](/material-

### Setup

If you are used to Tailwind CSS and want to use it together with the MUI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-cra-tailwind-ts) example project. If you use a different framework, or already have set up your project, follow these steps:
If you are used to Tailwind CSS and want to use it together with the MUI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts) example project. If you use a different framework, or already have set up your project, follow these steps:

1. Add Tailwind CSS to your project, following the instructions in https://tailwindcss.com/docs/installation.
2. Remove [Tailwind CSS's preflight](https://tailwindcss.com/docs/preflight) style so it can use the MUI's preflight instead ([CssBaseline](/material-ui/react-css-baseline/)).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -292,8 +292,8 @@ If, however, you would like to use styled-components, you can configure your app

<!-- #default-branch-switch -->

- [Create React App with styled-components](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components)
- [Create React App with styled-components and typescript](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components-ts)
- [Create React App with styled-components](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts)
- [Create React App with styled-components and typescript](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts)

After the style engine is configured properly, you can use the [`styled()`](/system/styled/) utility from `@mui/core/styles` and have direct access to the theme.

Expand Down Expand Up @@ -593,7 +593,7 @@ It works exactly like styled components. You can [use the same guide](/material-
### Setup
If you are used to Tailwind CSS and want to use it together with the MUI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-cra-tailwind-ts) example project. If you use a different framework, or already have set up your project, follow these steps:
If you are used to Tailwind CSS and want to use it together with the MUI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts) example project. If you use a different framework, or already have set up your project, follow these steps:
1. Add Tailwind CSS to your project, following the instructions in https://tailwindcss.com/docs/installation.
2. Remove [Tailwind CSS's preflight](https://tailwindcss.com/docs/preflight) style so it can use the MUI's preflight instead ([CssBaseline](/material-ui/react-css-baseline/)).
Expand Down
4 changes: 2 additions & 2 deletions docs/data/material/guides/routing/routing-pt.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,9 @@ const LinkBehavior = React.forwardRef((props, ref) => (

### Next.js

Next.js has [a custom Link component](https://nextjs.org/docs/api-reference/next/link). The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-next-ts) provides adapters for usage with MUI.
Next.js has [a custom Link component](https://nextjs.org/docs/api-reference/next/link). The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router-ts) provides adapters for usage with MUI.

- The first version of the adapter is the [`NextLinkComposed`](https://github.com/mui/material-ui/blob/HEAD/examples/material-next-ts/src/Link.tsx) component. Este componente não tem estilo e é o único responsável pelo manuseio da navegação. The prop `href` was renamed `to` to avoid a naming conflict. This is similar to react-router's Link component.
- The first version of the adapter is the [`NextLinkComposed`](https://github.com/mui/material-ui/blob/HEAD/examples/material-ui-nextjs-pages-router-ts/src/Link.tsx) component. Este componente não tem estilo e é o único responsável pelo manuseio da navegação. The prop `href` was renamed `to` to avoid a naming conflict. This is similar to react-router's Link component.

```tsx
import Button from '@material-ui/core/Button';
Expand Down
4 changes: 2 additions & 2 deletions docs/data/material/guides/routing/routing-zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,9 +83,9 @@ In real-life applications, using a native <code><a></code> element is rarely eno

### Next.js

Next.js has [a custom Link component](https://nextjs.org/docs/api-reference/next/link). The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-next-ts) provides adapters for usage with MUI.
Next.js has [a custom Link component](https://nextjs.org/docs/api-reference/next/link). The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router-ts) provides adapters for usage with MUI.

- The first version of the adapter is the [`NextLinkComposed`](https://github.com/mui/material-ui/tree/HEAD/examples/material-next-ts/src/Link.tsx) component. This component is unstyled and only responsible for handling the navigation. The prop `href` was renamed `to` to avoid a naming conflict. This is similar to react-router's Link component.
- The first version of the adapter is the [`NextLinkComposed`](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router-ts/src/Link.tsx) component. This component is unstyled and only responsible for handling the navigation. The prop `href` was renamed `to` to avoid a naming conflict. This is similar to react-router's Link component.

```tsx
import Button from '@mui/material/Button';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -98,8 +98,8 @@ If you are using create-react-app, there is a ready-to-use template in the examp

<!-- #default-branch-switch -->

- [create-react-app](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components)
- [create-react-app with TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components-ts)
- [create-react-app](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts)
- [create-react-app with TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts)
- [and many others](https://github.com/mui/material-ui/tree/master/examples)

:::warning
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,8 @@ If you are using create-react-app, there is a ready-to-use template in the examp

<!-- #default-branch-switch -->

- [create-react-app](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components)
- [使用 TypeScript 来 create-react-app](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components-ts)
- [create-react-app](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts)
- [使用 TypeScript 来 create-react-app](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts)
- [其他模板](https://github.com/mui/material-ui/tree/master/examples)

:::warning
Expand Down
4 changes: 2 additions & 2 deletions docs/data/material/guides/typescript/typescript-pt.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@

<!-- #default-branch-switch -->

Material-UI requires a minimum version of TypeScript 3.5. Have a look at the [Create React App with TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-cra-ts) example.
Material-UI requires a minimum version of TypeScript 3.5. Have a look at the [Create React App with TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-ts) example.

Dê uma olhada no exemplo [Create React App com TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-cra-ts).
Dê uma olhada no exemplo [Create React App com TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-ts).

```json
{
Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/guides/typescript/typescript-zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

<!-- #default-branch-switch -->

MUI requires a minimum version of TypeScript 3.5. Material-UI requires a minimum version of TypeScript 3.5. 请查看一下 [Create React App with TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-cra-ts) 的例子。
MUI requires a minimum version of TypeScript 3.5. Material-UI requires a minimum version of TypeScript 3.5. 请查看一下 [Create React App with TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-ts) 的例子。

请查看 [Create React App with TypeScript](https://github.com/mui/material-ui/tree/next/examples/create-react-app-with-typescript) 的例子。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ One of the biggest changes in v5 is the replacement of JSS for [Emotion](https:/
Note that you may continue to use JSS for adding overrides for the components (e.g. `makeStyles`, `withStyles`) even after migrating to v5. Then, if at any point you want to move over to the new styling engine, you can refactor your components progressively.

:::info
If you are using Next.js and you are not sure how to configure SSR to work with both Emotion & JSS, take a look a this [example project](https://github.com/mui/material-ui/tree/master/examples/material-next-ts-v4-v5-migration).
If you are using Next.js and you are not sure how to configure SSR to work with both Emotion & JSS, take a look a this [example project](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts-v4-v5-migration).
:::

This document reviews all the steps necessary to migrate away from JSS.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ v5中最大的变化之一是将JSS替换为[Emotion](https://emotion.sh/docs/in
请注意,你可以继续使用JSS为组件添加重写(例如`makeStyles`, `withStyles`),即使在迁移到v5之后。 然后,如果在任何时候你想转移到新的样式引擎,你可以逐步重构你的组件。

:::info
如果你正在使用Next.js,并且不确定如何配置SSR以与Emotion和JSS一起工作,可以看一下这个[例子项目](https://github.com/mui/material-ui/tree/master/examples/material-next-ts-v4-v5-migration)
如果你正在使用Next.js,并且不确定如何配置SSR以与Emotion和JSS一起工作,可以看一下这个[例子项目](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts-v4-v5-migration)
:::

本文档回顾了从JSS迁移的所有必要步骤。
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Need to refer back to an older version of the docs? Check out [the v4 documentat
:::

:::info
If you are using Next.js and you are not sure how to configure SSR to work with both Emotion & JSS, take a look a this [example project](https://github.com/mui/material-ui/tree/master/examples/material-next-ts-v4-v5-migration).
If you are using Next.js and you are not sure how to configure SSR to work with both Emotion & JSS, take a look a this [example project](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts-v4-v5-migration).
:::

## Why you should migrate
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ V5最大的变化之一是将JSS替换为[Emotion](https://emotion.sh/docs/intro
需要参考旧版本的文档吗? 在这里查看[v4的文档](https://v4.mui.com/)
:::

如果你正在使用Next.js,并且不确定如何配置SSR以与Emotion 和 JSS一起工作,请看这个[例子项目](https://github.com/mui/material-ui/tree/master/examples/material-next-ts-v4-v5-migration)
如果你正在使用Next.js,并且不确定如何配置SSR以与Emotion 和 JSS一起工作,请看这个[例子项目](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts-v4-v5-migration)
:::

## 为什么你应该迁移
Expand Down
4 changes: 2 additions & 2 deletions docs/data/styles/advanced/advanced-pt.md
Original file line number Diff line number Diff line change
Expand Up @@ -394,15 +394,15 @@ Existe [um plugin oficial Gatsby](https://github.com/hupe1980/gatsby-plugin-mate

<!-- #default-branch-switch -->

Refer to [this example Gatsby project](https://github.com/mui/material-ui/tree/master/examples/material-gatsby) for an up-to-date usage example.
Refer to [this example Gatsby project](https://github.com/mui/material-ui/tree/master/examples/material-ui-gatsby) for an up-to-date usage example.

### Next.js

Você precisa ter um `pages/_document.js` customizado, então copie [esta lógica](https://github.com/mui/material-ui/blob/814fb60bbd8e500517b2307b6a297a638838ca89/examples/nextjs/pages/_document.js#L52-L59) para injetar os estilos renderizados no lado do servidor no elemento `<head>`.

<!-- #default-branch-switch -->

Refer to [this example project](https://github.com/mui/material-ui/tree/master/examples/material-next) for an up-to-date usage example.
Refer to [this example project](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router-ts) for an up-to-date usage example.

## Nomes de classes

Expand Down
4 changes: 2 additions & 2 deletions docs/data/styles/advanced/advanced-zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -407,15 +407,15 @@ function render() {
<!-- #default-branch-switch -->
请参考 [这个Gatsby项目的例子](https://github.com/mui/material-ui/tree/master/examples/material-gatsby),了解最新的使用范例。
请参考 [这个Gatsby项目的例子](https://github.com/mui/material-ui/tree/master/examples/material-ui-gatsby),了解最新的使用范例。
### Next.js
您需要有一个自定义的 `pages/_document.js`,然后复制 [此逻辑](https://github.com/mui/material-ui/blob/814fb60bbd8e500517b2307b6a297a638838ca89/examples/nextjs/pages/_document.js#L52-L59) 以注入服务器侧渲染的样式到 `<head>` 元素中。
<!-- #default-branch-switch -->
请参考[这个例子项目](https://github.com/mui/material-ui/tree/master/examples/material-next),了解最新的使用范例。
请参考[这个例子项目](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router-ts),了解最新的使用范例。
## 类名(Class names)
Expand Down

0 comments on commit 916b760

Please sign in to comment.