[docs] Polish jss-to-styled docs (#27457)

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -116,7 +116,7 @@ We have prepared these codemods to ease your migration experience.
 This codemod contains most of the transformers that are useful for migration. (**This codemod should be applied only once per folder**)
 
 ```sh
-npx @material-ui/codemod@next v5.0.0/preset-safe <folder>
+npx @material-ui/codemod@next v5.0.0/preset-safe <path>
 ```
 
 > If you want to run the transformers one by one, check out [preset-safe codemod](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-codemod/README.md#-preset-safe) for more details.
@@ -142,10 +142,10 @@ createMuiTheme({
 However, if you want to keep `variant="standard"` to you components, run this codemod or configure theme default props.
 
 ```sh
-npx @material-ui/codemod@next v5.0.0/variant-prop <folder>
+npx @material-ui/codemod@next v5.0.0/variant-prop <path>
 ```
 
-> For more details, checkout [variant-prop codemod](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-codemod/README.md#variant-prop)
+For more details, checkout [variant-prop codemod](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-codemod/README.md#variant-prop).
 
 ### link-underline-hover
 
@@ -168,10 +168,10 @@ createMuiTheme({
 However, if you want to keep `variant="hover"` to you components, run this codemod or configure theme default props.
 
 ```sh
-npx @material-ui/codemod@next v5.0.0/link-underline-hover <folder>
+npx @material-ui/codemod@next v5.0.0/link-underline-hover <path>
 ```
 
-> For more details, checkout [link-underline-hover codemod](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-codemod/README.md#link-underline-hover)
+For more details, checkout [link-underline-hover codemod](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-codemod/README.md#link-underline-hover).
 
 Once you have completed the codemod step, try running your application again. At this point, it should be running without error. Otherwise check out the [Troubleshooting](#troubleshooting) section. Next step, handling breaking changes in each component.
 
@@ -2375,23 +2375,22 @@ Take a look at the whole [list of pseudo-state global classnames](/customization
 ## Migrate `makeStyles` to emotion
 
 This is the last step in the migration process to remove `@material-ui/styles` package from your codebase.
-
-We recommend 2 options.
+We recommend two options.
 
 ### 1. Use `styled` or `sx` API
 
 #### Codemod
 
-We provide a codemod to help migrate JSS styles to `styled` API, but this approach **increases the CSS specificity**.
+We provide [a codemod](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-codemod/README.md#jss-to-styled) to help migrate JSS styles to `styled` API, but this approach **increases the CSS specificity**.
 
 ```sh
-npx @material-ui/codemod v5.0.0/jss-to-styled <folder|file>
+npx @material-ui/codemod@next v5.0.0/jss-to-styled <path>
 ```
 
 **Example transformation**:
 
 ```diff
-import Typography from '@material-ui/core/Typography';
+ import Typography from '@material-ui/core/Typography';
 -import makeStyles from '@material-ui/styles/makeStyles';
 +import { styled } from '@material-ui/core/styles';
 
@@ -2432,64 +2431,64 @@ import Typography from '@material-ui/core/Typography';
 +  },
 +}))
 
-export const MyCard = () => {
-- const classes = useStyles();
-  return (
--   <div className={classes.root}>
-+   <Root className={classes.root}>
-      {/* The benefit of this approach is that the code inside Root stays the same. */}
-      <Typography className={classes.content}>...</Typography>
-      <Button className={classes.cta}>Go</Button>
-+   </Root>
--   </div>
-  )
-}
+ export const MyCard = () => {
+-  const classes = useStyles();
+   return (
+-    <div className={classes.root}>
++    <Root className={classes.root}>
+       {/* The benefit of this approach is that the code inside Root stays the same. */}
+       <Typography className={classes.content}>...</Typography>
+       <Button className={classes.cta}>Go</Button>
+-    </div>
++    </Root>
+   )
+ }
 ```
 
 > 💡 You should run this codemod per small chunk of files and then check the changes because in some cases you might need to adjust the code after the transformation (this codemod won't cover all of the cases).
 
-We recommend `sx` API over `styled` when you have to create responsive styles or needs minor CSS overrides. [Read more about `sx`](/system/the-sx-prop/#main-content)
+We recommend `sx` API over `styled` when you have to create responsive styles or needs minor CSS overrides. [Read more about `sx`](/system/the-sx-prop/#main-content).
 
 ```diff
-import Chip from '@material-ui/core/Chip';
-- import makeStyles from '@material-ui/styles/makeStyles';
-+ import { styled } from '@material-ui/core/styles';
-
-- const useStyles = makeStyles((theme) => ({
--   wrapper: {
--     display: 'flex',
--   },
--   chip: {
--     padding: theme.spacing(1, 1.5),
--     boxShadow: theme.shadows[1],
--   }
-- }))
-+ const Root = styled('div')({
-+   display: 'flex',
-+ })
+ import Chip from '@material-ui/core/Chip';
+-import makeStyles from '@material-ui/styles/makeStyles';
++import { styled } from '@material-ui/core/styles';
 
-function App() {
-- const classes = useStyles();
-  return (
--   <div>
--     <Chip className={classes.chip} label="Chip" />
--   </div>
-+   <Root>
-+     <Chip label="Chip" sx={{ py: 1, px: 1.5, boxShadow: 1 }} />
-+   </Root>
-  )
-}
+-const useStyles = makeStyles((theme) => ({
+-  wrapper: {
+-    display: 'flex',
+-  },
+-  chip: {
+-    padding: theme.spacing(1, 1.5),
+-    boxShadow: theme.shadows[1],
+-  }
+-}))
++const Root = styled('div')({
++  display: 'flex',
++})
+
+ function App() {
+-  const classes = useStyles();
+   return (
+-    <div>
+-      <Chip className={classes.chip} label="Chip" />
+-    </div>
++    <Root>
++      <Chip label="Chip" sx={{ py: 1, px: 1.5, boxShadow: 1 }} />
++    </Root>
+   )
+ }
 ```
 
 #### Manual
 
 In some cases, you might want to create multiple styled components in a file instead of increasing CSS specificity. for example:
 
 ```diff
-- import makeStyles from '@material-ui/styles/makeStyles';
-+ import { styled } from '@material-ui/core/styles';
+-import makeStyles from '@material-ui/styles/makeStyles';
++import { styled } from '@material-ui/core/styles';
 
-- const useStyles = makeStyles((theme) => ({
+-const useStyles = makeStyles((theme) => ({
 -  root: {
 -    display: 'flex',
 -    alignItems: 'center',
@@ -2499,21 +2498,21 @@ In some cases, you might want to create multiple styled components in a file ins
 -  label: {
 -    color: theme.palette.primary.main,
 -  }
-- }))
-+ const Root = style('div')(({ theme }) => ({
-+   display: 'flex',
-+   alignItems: 'center',
-+   borderRadius: 20,
-+   background: theme.palette.grey[50],
-+ }))
-
-+ const Label = style('span')(({ theme }) => ({
-+   color: theme.palette.primary.main,
-+ }))
-
-function Status({ label }) {
-  const classes = useStyles();
-  return (
+-}))
++const Root = style('div')(({ theme }) => ({
++  display: 'flex',
++  alignItems: 'center',
++  borderRadius: 20,
++  background: theme.palette.grey[50],
++}))
+
++const Label = style('span')(({ theme }) => ({
++  color: theme.palette.primary.main,
++}))
+
+ function Status({ label }) {
+   const classes = useStyles();
+   return (
 -    <div className={classe.root}>
 -      {icon}
 -      <span className={classes.label}>{label}</span>
@@ -2522,8 +2521,8 @@ function Status({ label }) {
 +      {icon}
 +      <Label className={classes.label}>{label}</Label>
 +    </Root>
-  )
-}
+   )
+ }
 ```
 
 > **Note:** [https://siriwatk.dev/tool/jss-to-styled](https://siriwatk.dev/tool/jss-to-styled) is a tool that helps converting JSS to multiple styled components without increasing CSS specificity. (This tool is **not maintained** by Material-UI)
@@ -2662,7 +2661,7 @@ In v5, `@material-ui/core/colors/red` is considered private and should not be us
 You can use this codemod (**recommended**) to fix all the import in your project:
 
 ```sh
-npx @material-ui/codemod v5.0.0/optimal-imports <folder>
+npx @material-ui/codemod@next v5.0.0/optimal-imports <path>
 ```
 
 or fix it manually like this:

packages/material-ui-codemod/README.md

@@ -584,8 +584,14 @@ export const MyCard = () => {
 }
 ```
 
-> **Note:** This approach convert the first element in the return statement into styled component but also increase CSS Specificity to override nested children. It is recommended to use this codemod in a big component that is intend to style nested components.
-> This codemod should be adopt after handling all breaking changes, [check out the migration documentation](https://next.material-ui.com/guides/migration-v4)
+```sh
+npx @material-ui/codemod@next v5.0.0/jss-to-styled <path>
+```
+
+You can find more details about this breaking change in [the migration guide](https://next.material-ui.com/guides/migration-v4/#1-use-styled-or-sx-api).
+
+> **Note:** This approach converts the first element in the return statement into styled component but also increases CSS specificity to override nested children.
+> This codemod should be adopted after handling all breaking changes, [check out the migration documentation](https://next.material-ui.com/guides/migration-v4/)
 
 #### `link-underline-hover`