Skip to content

Commit

Permalink
go with a non breaking approach
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Dec 7, 2019
1 parent a229846 commit 75f0d16
Show file tree
Hide file tree
Showing 3 changed files with 3 additions and 32 deletions.
30 changes: 1 addition & 29 deletions docs/pages/api/container.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,13 @@ Any other props supplied will be provided to the root element (native element).

## CSS

<<<<<<< HEAD
- Style sheet name: `MuiContainer`.
- Style sheet details:

| Rule name | Global class | Description |
|:-----|:-------------|:------------|
| <span class="prop-name">root</span> | <span class="prop-name">.MuiContainer-root</span> | Styles applied to the root element.
| <span class="prop-name">disableGutters</span> | <span class="prop-name">.MuiContainer-disableGutters</span> | Styles applied to the inner `component` element if `disableGutters={true}`.
| <span class="prop-name">disableGutters</span> | <span class="prop-name">.MuiContainer-disableGutters</span> | Styles applied to the root element if `disableGutters={true}`.
| <span class="prop-name">fixed</span> | <span class="prop-name">.MuiContainer-fixed</span> | Styles applied to the root element if `fixed={true}`.
| <span class="prop-name">maxWidthXs</span> | <span class="prop-name">.MuiContainer-maxWidthXs</span> | Styles applied to the root element if `maxWidth="xs"`.
| <span class="prop-name">maxWidthSm</span> | <span class="prop-name">.MuiContainer-maxWidthSm</span> | Styles applied to the root element if `maxWidth="sm"`.
Expand All @@ -59,33 +58,6 @@ You can override the style of the component thanks to one of these customization
- With a theme and an [`overrides` property](/customization/globals/#css).

If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Container/Container.js) for more detail.
=======
You can override all the class names injected by Material-UI thanks to the `classes` prop.
This prop accepts the following keys:


| Name | Description |
|:-----|:------------|
| <span class="prop-name">root</span> | Styles applied to the root element.
| <span class="prop-name">gutters</span> | Styles applied to the root element if `disableGutters={false}`.
| <span class="prop-name">fixed</span> | Styles applied to the root element if `fixed={true}`.
| <span class="prop-name">maxWidthXs</span> | Styles applied to the root element if `maxWidth="xs"`.
| <span class="prop-name">maxWidthSm</span> | Styles applied to the root element if `maxWidth="sm"`.
| <span class="prop-name">maxWidthMd</span> | Styles applied to the root element if `maxWidth="md"`.
| <span class="prop-name">maxWidthLg</span> | Styles applied to the root element if `maxWidth="lg"`.
| <span class="prop-name">maxWidthXl</span> | Styles applied to the root element if `maxWidth="xl"`.

Have a look at the [overriding styles with classes](/customization/components/#overriding-styles-with-classes) section
and the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Container/Container.js)
for more detail.

If using the `overrides` [key of the theme](/customization/themes/#css),
you need to use the following style sheet name: `MuiContainer`.

## Notes

The component is fully [StrictMode](https://reactjs.org/docs/strict-mode.html) compatible.
>>>>>>> update the API wording to target the root

## Demos

Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/Container/Container.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export interface ContainerProps

export type ContainerClassKey =
| 'root'
| 'gutters'
| 'disableGutters'
| 'fixed'
| 'maxWidthXs'
| 'maxWidthSm'
Expand Down
3 changes: 1 addition & 2 deletions packages/material-ui/src/Container/Container.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,7 @@ export const styles = theme => ({
paddingRight: theme.spacing(4),
},
},
// TODO change style rule to gutters in v5, avoid duplication of CSS.
/* Styles applied to the inner `component` element if `disableGutters={true}`. */
/* Styles applied to the root element if `disableGutters={true}`. */
disableGutters: {
paddingLeft: 0,
paddingRight: 0,
Expand Down

0 comments on commit 75f0d16

Please sign in to comment.