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

Jump to bottom

[docs] Make CSS interoperability examples easier to use #20860

Merged
merged 3 commits into from
May 3, 2020
Merged

[docs] Make CSS interoperability examples easier to use #20860

merged 3 commits into from
May 3, 2020

Conversation

weisk
Copy link
Contributor

@weisk weisk commented May 1, 2020

I guess the demo has to show that you still have to import the file in order for this approach to work.

@weisk
[docs] Plain css, little detail
6be0938 
I guess the demo has to show that you still have to import the file in order for this approach to work.
@mui-pr-bot
Copy link

mui-pr-bot commented May 1, 2020 •
edited

Details of bundle changes.

Comparing: 4bfcbec...6dad21d

Details of page changes
bundle Size Change Size Gzip Change Gzip
/getting-started/templates/blog ▼ -10 B (-0.13% ) 7.44 kB -- -1 B
/premium-themes/onepirate/privacy ▲ +10 B (+0.23% ) 4.44 kB -- -1 B
/_app -- 37 kB -- -1 B
/api-docs/alert-title -- 1.4 kB -- -1 B
/api-docs/alert -- 2.4 kB -- -1 B
/api-docs/app-bar -- 1.94 kB -- -1 B
/api-docs/autocomplete -- 4.54 kB -- -1 B
/api-docs/avatar-group -- 1.51 kB -- -1 B
/api-docs/avatar -- 1.86 kB -- -1 B
/api-docs/backdrop -- 1.72 kB -- -1 B
/api-docs/badge -- 2.13 kB -- -1 B
/api-docs/bottom-navigation-action -- 1.81 kB -- -1 B
/api-docs/bottom-navigation -- 1.7 kB -- -1 B
/api-docs/breadcrumbs -- 1.84 kB -- -1 B
/api-docs/button-base -- 2.33 kB -- -1 B
/api-docs/button-group -- 2.23 kB -- -1 B
/api-docs/button -- 2.56 kB -- -1 B
/api-docs/card-action-area -- 1.58 kB -- -1 B
/api-docs/card-actions -- 1.47 kB -- -1 B
/api-docs/card-content -- 1.45 kB -- -1 B
/api-docs/card-header -- 1.78 kB -- -1 B
/api-docs/card-media -- 1.69 kB -- -1 B
/api-docs/card -- 1.5 kB -- -1 B
/api-docs/checkbox -- 2.3 kB -- -1 B
/api-docs/chip -- 2.46 kB -- -1 B
/api-docs/circular-progress -- 2.07 kB -- -1 B
/api-docs/click-away-listener -- 1.37 kB -- -1 B
/api-docs/collapse -- 2.02 kB -- -1 B
/api-docs/container -- 1.86 kB -- -1 B
/api-docs/css-baseline -- 1.4 kB -- -1 B
/api-docs/dialog-actions -- 1.47 kB -- -1 B
/api-docs/dialog-content-text -- 1.48 kB -- -1 B
/api-docs/dialog-content -- 1.45 kB -- -1 B
/api-docs/dialog-title -- 1.49 kB -- -1 B
/api-docs/dialog -- 2.73 kB -- -1 B
/api-docs/divider -- 1.81 kB -- -1 B
/api-docs/drawer -- 2.13 kB -- -1 B
/api-docs/expansion-panel-actions -- 1.49 kB -- -1 B
/api-docs/expansion-panel-details -- 1.41 kB -- -1 B
/api-docs/expansion-panel-summary -- 1.72 kB -- -1 B
/api-docs/expansion-panel -- 1.97 kB -- -1 B
/api-docs/fab -- 2.11 kB -- -1 B
/api-docs/fade -- 1.39 kB -- -1 B
/api-docs/filled-input -- 2.87 kB -- -1 B
/api-docs/form-control-label -- 1.98 kB -- -1 B
/api-docs/form-control -- 2.36 kB -- -1 B
/api-docs/form-group -- 1.55 kB -- -1 B
/api-docs/form-helper-text -- 1.91 kB -- -1 B
/api-docs/form-label -- 1.84 kB -- -1 B
/api-docs/grid-list-tile-bar -- 1.8 kB -- -1 B
/api-docs/grid-list-tile -- 1.72 kB -- -1 B
/api-docs/grid-list -- 1.62 kB -- -1 B
/api-docs/grid -- 2.56 kB -- -1 B
/api-docs/grow -- 1.44 kB -- -1 B
/api-docs/hidden -- 1.53 kB -- -1 B
/api-docs/icon-button -- 2.1 kB -- -1 B
/api-docs/icon -- 1.78 kB -- -1 B
/api-docs/input-adornment -- 1.93 kB -- -1 B
/api-docs/input-base -- 2.95 kB -- -1 B
/api-docs/input-label -- 2.07 kB -- -1 B
/api-docs/input -- 2.83 kB -- -1 B
/api-docs/linear-progress -- 2.03 kB -- -1 B
/api-docs/link -- 1.93 kB -- -1 B
/api-docs/list-item-avatar -- 1.5 kB -- -1 B
/api-docs/list-item-icon -- 1.51 kB -- -1 B
/api-docs/list-item-secondary-action -- 1.47 kB -- -1 B
/api-docs/list-item-text -- 1.79 kB -- -1 B
/api-docs/list-item -- 2.25 kB -- -1 B
/api-docs/list-subheader -- 1.77 kB -- -1 B
/api-docs/list -- 1.68 kB -- -1 B
/api-docs/menu-item -- 1.74 kB -- -1 B
/api-docs/menu-list -- 1.57 kB -- -1 B
/api-docs/menu -- 2.4 kB -- -1 B
/api-docs/mobile-stepper -- 1.93 kB -- -1 B
/api-docs/modal -- 2.42 kB -- -1 B
/api-docs/native-select -- 2.08 kB -- -1 B
/api-docs/no-ssr -- 1.3 kB -- -1 B
/api-docs/outlined-input -- 2.98 kB -- -1 B
/api-docs/pagination-item -- 1.97 kB -- -1 B
/api-docs/pagination -- 2.24 kB -- -1 B
/api-docs/paper -- 1.87 kB -- -1 B
/api-docs/popover -- 2.69 kB -- -1 B
/api-docs/popper -- 1.91 kB -- -1 B
/api-docs/portal -- 1.34 kB -- -1 B
/api-docs/radio-group -- 1.45 kB -- -1 B
/api-docs/radio -- 2.12 kB -- -1 B
/api-docs/rating -- 2.49 kB -- -1 B
/api-docs/root-ref -- 1.41 kB -- -1 B
/api-docs/scoped-css-baseline -- 1.4 kB -- -1 B
/api-docs/select -- 2.94 kB -- -1 B
/api-docs/skeleton -- 1.77 kB -- -1 B
/api-docs/slide -- 1.54 kB -- -1 B
/api-docs/slider -- 3.11 kB -- -1 B
/api-docs/snackbar-content -- 1.61 kB -- -1 B
/api-docs/snackbar -- 2.71 kB -- -1 B
/api-docs/speed-dial-action -- 2.04 kB -- -1 B
/api-docs/speed-dial-icon -- 1.55 kB -- -1 B
/api-docs/speed-dial -- 2.3 kB -- -1 B
/api-docs/step-button -- 1.63 kB -- -1 B
/api-docs/step-connector -- 1.54 kB -- -1 B
/api-docs/step-content -- 1.72 kB -- -1 B
/api-docs/step-icon -- 1.57 kB -- -1 B
/api-docs/step-label -- 1.9 kB -- -1 B
/api-docs/step -- 1.64 kB -- -1 B
/api-docs/stepper -- 1.84 kB -- -1 B
/api-docs/svg-icon -- 2.26 kB -- -1 B
/api-docs/swipeable-drawer -- 2 kB -- -1 B
/api-docs/switch -- 2.46 kB -- -1 B
/api-docs/tab-scroll-button -- 1.61 kB -- -1 B
/api-docs/tab -- 1.99 kB -- -1 B
/api-docs/table-body -- 1.47 kB -- -1 B
/api-docs/table-cell -- 2.13 kB -- -1 B
/api-docs/table-container -- 1.48 kB -- -1 B
/api-docs/table-footer -- 1.47 kB -- -1 B
/api-docs/table-head -- 1.46 kB -- -1 B
/api-docs/table-pagination -- 2.46 kB -- -1 B
/api-docs/table-row -- 1.69 kB -- -1 B
/api-docs/table-sort-label -- 1.83 kB -- -1 B
/api-docs/table -- 1.68 kB -- -1 B
/api-docs/tabs -- 2.56 kB -- -1 B
/api-docs/text-field -- 3.18 kB -- -1 B
/api-docs/textarea-autosize -- 1.13 kB -- -1 B
/api-docs/toggle-button-group -- 1.86 kB -- -1 B
/api-docs/toggle-button -- 1.8 kB -- -1 B
/api-docs/toolbar -- 1.65 kB -- -1 B
/api-docs/tooltip -- 2.54 kB -- -1 B
/api-docs/tree-item -- 1.88 kB -- -1 B
/api-docs/tree-view -- 1.92 kB -- -1 B
/api-docs/typography -- 2.59 kB -- -1 B
/api-docs/zoom -- 1.41 kB -- -1 B
/blog/2019-developer-survey-results -- 6.36 kB -- -1 B
/blog/2019 -- 4.24 kB -- -1 B
/blog/2020-introducing-sketch -- 3.5 kB -- -1 B
/blog/2020-q1-update -- 4.33 kB -- -1 B
/blog/april-2019-update -- 3.13 kB -- -1 B
/blog/august-2019-update -- 2.24 kB -- -1 B
/blog/december-2019-update -- 2.37 kB -- -1 B
/blog/july-2019-update -- 2.13 kB -- -1 B
/blog/june-2019-update -- 2.01 kB -- -1 B
/blog/march-2019-update -- 2.54 kB -- -1 B
/blog/material-ui-v1-is-out -- 6.67 kB -- -1 B
/blog/material-ui-v4-is-out -- 9.69 kB -- -1 B
/blog/may-2019-update -- 2.35 kB -- -1 B
/blog/november-2019-update -- 2.75 kB -- -1 B
/blog/october-2019-update -- 2.5 kB -- -1 B
/blog/september-2019-update -- 2.68 kB -- -1 B
/company/about -- 1.74 kB -- -1 B
/company/contact -- 1.33 kB -- -1 B
/company/jobs -- 1.35 kB -- -1 B
/components/about-the-lab -- 6.08 kB -- -1 B
/components/alert -- 12.5 kB -- -1 B
/components/app-bar -- 30 kB -- -1 B
/components/autocomplete -- 99 kB -- -1 B
/components/avatars -- 8.83 kB -- -1 B
/components/backdrop -- 2.58 kB -- -1 B
/components/badges -- 15.4 kB -- -1 B
/components/bottom-navigation -- 6.27 kB -- -1 B
/components/box -- 8.05 kB -- -1 B
/components/breadcrumbs -- 14.7 kB -- -1 B
/components/button-group -- 7.31 kB -- -1 B
/components/buttons -- 26.2 kB -- -1 B
/components/cards -- 17.2 kB -- -1 B
/components/checkboxes -- 16.3 kB -- -1 B
/components/chips -- 21.8 kB -- -1 B
/components/click-away-listener -- 4.46 kB -- -1 B
/components/container -- 3.72 kB -- -1 B
/components/css-baseline -- 6.74 kB -- -1 B
/components/dialogs -- 42.8 kB -- -1 B
/components/dividers -- 12.7 kB -- -1 B
/components/drawers -- 31.5 kB -- -1 B
/components/expansion-panels -- 20.4 kB -- -1 B
/components/floating-action-button -- 10.4 kB -- -1 B
/components/grid-list -- 12.1 kB -- -1 B
/components/grid -- 32.4 kB -- -1 B
/components/hidden -- 10.6 kB -- -1 B
/components/icons -- 24.7 kB -- -1 B
/components/links -- 6.91 kB -- -1 B
/components/lists -- 26.5 kB -- -1 B
/components/material-icons -- 729 kB -- -1 B
/components/menus -- 24.9 kB -- -1 B
/components/modal -- 11.9 kB -- -1 B
/components/no-ssr -- 5.11 kB -- -1 B
/components/pagination -- 9.45 kB -- -1 B
/components/paper -- 3.49 kB -- -1 B
/components/pickers -- 6 kB -- -1 B
/components/popover -- 17.4 kB -- -1 B
/components/popper -- 23.4 kB -- -1 B
/components/portal -- 3 kB -- -1 B
/components/progress -- 20.3 kB -- -1 B
/components/radio-buttons -- 14.8 kB -- -1 B
/components/rating -- 10.8 kB -- -1 B
/components/selects -- 30.8 kB -- -1 B
/components/skeleton -- 10.1 kB -- -1 B
/components/slider -- 15.6 kB -- -1 B
/components/snackbars -- 28.6 kB -- -1 B
/components/speed-dial -- 14.4 kB -- -1 B
/components/steppers -- 36.6 kB -- -1 B
/components/switches -- 16.4 kB -- -1 B
/components/tables -- 143 kB -- -1 B
/components/tabs -- 19.8 kB -- -1 B
/components/text-fields -- 54.8 kB -- -1 B
/components/textarea-autosize -- 2.94 kB -- -1 B
/components/toggle-button -- 10.5 kB -- -1 B
/components/tooltips -- 16.5 kB -- -1 B
/components/transfer-list -- 9.68 kB -- -1 B
/components/transitions -- 11.5 kB -- -1 B
/components/tree-view -- 11.2 kB -- -1 B
/components/typography -- 9.92 kB -- -1 B
/components/use-media-query -- 12.9 kB -- -1 B
/customization/breakpoints -- 15.7 kB -- -1 B
/customization/color -- 20.9 kB -- -1 B
/customization/components -- 38.4 kB -- -1 B
/customization/default-theme -- 8.8 kB -- -1 B
/customization/density -- 9.75 kB -- -1 B
/customization/globals -- 4.72 kB -- -1 B
/customization/palette -- 13.3 kB -- -1 B
/customization/spacing -- 2.61 kB -- -1 B
/customization/theming -- 16.8 kB -- -1 B
/customization/typography -- 11.6 kB -- -1 B
/customization/z-index -- 3.13 kB -- -1 B
/discover-more/backers -- 2.94 kB -- -1 B
/discover-more/changelog -- 1.44 kB -- -1 B
/discover-more/languages -- 3.44 kB -- -1 B
/discover-more/related-projects -- 7.95 kB -- -1 B
/discover-more/roadmap -- 3.72 kB -- -1 B
/discover-more/showcase -- 13.4 kB -- -1 B
/discover-more/team -- 6.61 kB -- -1 B
/discover-more/vision -- 6.59 kB -- -1 B
/getting-started/example-projects -- 6.8 kB -- -1 B
/getting-started/faq -- 36.1 kB -- -1 B
/getting-started/installation -- 7.85 kB -- -1 B
/getting-started/learn -- 8.97 kB -- -1 B
/getting-started/support -- 8.95 kB -- -1 B
/getting-started/supported-components -- 6.42 kB -- -1 B
/getting-started/supported-platforms -- 5.76 kB -- -1 B
/getting-started/templates -- 8.91 kB -- -1 B
/getting-started/templates/album -- 5.59 kB -- -1 B
/getting-started/templates/checkout -- 11.2 kB -- -1 B
/getting-started/templates/dashboard -- 8.86 kB -- -1 B
/getting-started/templates/pricing -- 7.8 kB -- -1 B
/getting-started/templates/sign-in-side -- 9.29 kB -- -1 B
/getting-started/templates/sign-in -- 9.53 kB -- -1 B
/getting-started/templates/sign-up -- 9.64 kB -- -1 B
/getting-started/templates/sticky-footer -- 1.54 kB -- -1 B
/getting-started/usage -- 9.58 kB -- -1 B
/guides/api -- 15.8 kB -- -1 B
/guides/composition -- 14.9 kB -- -1 B
/guides/flow -- 2.26 kB -- -1 B
/guides/interoperability -- 16.3 kB -- -1 B
/guides/localization -- 11.6 kB -- -1 B
/guides/migration-v0x -- 7.39 kB -- -1 B
/guides/migration-v3 -- 19.2 kB -- -1 B
/guides/minimizing-bundle-size -- 8.7 kB -- -1 B
/guides/responsive-ui -- 4.27 kB -- -1 B
/guides/right-to-left -- 6.77 kB -- -1 B
/guides/server-rendering -- 8.75 kB -- -1 B
/guides/testing -- 8.61 kB -- -1 B
/guides/typescript -- 14.6 kB -- -1 B
/performance/table-component -- 1.44 kB -- -1 B
/performance/table-emotion -- 8.49 kB -- -1 B
/performance/table-hook -- 2.24 kB -- -1 B
/performance/table-mui -- 4.49 kB -- -1 B
/performance/table-raw -- 613 B -- -1 B
/performance/table-styled-components -- 2.61 kB -- -1 B
/premium-themes/onepirate -- 7.27 kB -- -1 B
/premium-themes/onepirate/forgot-password -- 1.01 kB -- -1 B
/premium-themes/onepirate/sign-in -- 1.07 kB -- -1 B
/premium-themes/onepirate/sign-up -- 1.12 kB -- -1 B
/premium-themes/onepirate/terms -- 11.8 kB -- -1 B
/premium-themes/paperbase -- 8.96 kB -- -1 B
/styles/advanced -- 33.3 kB -- -1 B
/styles/api -- 17 kB -- -1 B
/styles/basics -- 16.5 kB -- -1 B
/system/api -- 5.96 kB -- -1 B
/system/basics -- 27.4 kB -- -1 B
/system/borders -- 4.1 kB -- -1 B
/system/display -- 6.55 kB -- -1 B
/system/flexbox -- 5.85 kB -- -1 B
/system/palette -- 4.35 kB -- -1 B
/system/positions -- 2.53 kB -- -1 B
/system/shadows -- 3.85 kB -- -1 B
/system/sizing -- 3.53 kB -- -1 B
/system/spacing -- 6.01 kB -- -1 B
/system/typography -- 4.41 kB -- -1 B
/versions -- 23.7 kB -- -1 B
docs:chunk:shared -- 61.6 kB -- -1 B
docs:shared:chunk/commons -- 5.99 kB -- -1 B
docs:shared:chunk/framework -- 42.3 kB -- -1 B
docs:shared:runtime/main -- 6.78 kB -- -1 B
docs:shared:runtime/webpack -- 1.24 kB -- -1 B
bundle Size Change Size Gzip Change Gzip
@material-ui/core -- 375 kB -- 103 kB
@material-ui/core[umd] -- 328 kB -- 94.6 kB
@material-ui/lab -- 203 kB -- 60.4 kB
@material-ui/styles -- 52.1 kB -- 15.6 kB
@material-ui/system -- 17.2 kB -- 4.52 kB
Alert -- 87.7 kB -- 27.8 kB
AlertTitle -- 69 kB -- 21.7 kB
AppBar -- 68.8 kB -- 21.6 kB
Autocomplete -- 136 kB -- 42.8 kB
Avatar -- 70 kB -- 21.9 kB
AvatarGroup -- 71 kB -- 22.5 kB
Backdrop -- 72.8 kB -- 22.5 kB
Badge -- 70.1 kB -- 21.9 kB
BottomNavigation -- 67.2 kB -- 21.1 kB
BottomNavigationAction -- 79.9 kB -- 25.4 kB
Box -- 73.7 kB -- 22.4 kB
Breadcrumbs -- 84.9 kB -- 27 kB
Button -- 84.2 kB -- 25.9 kB
ButtonBase -- 78.4 kB -- 24.7 kB
ButtonGroup -- 87.8 kB -- 27.1 kB
Card -- 67.7 kB -- 21.2 kB
CardActionArea -- 79.5 kB -- 25.2 kB
CardActions -- 66.9 kB -- 21 kB
CardContent -- 66.8 kB -- 20.9 kB
CardHeader -- 69.9 kB -- 22 kB
CardMedia -- 67.2 kB -- 21.1 kB
Checkbox -- 86.6 kB -- 27.5 kB
Chip -- 87.1 kB -- 26.8 kB
CircularProgress -- 68.9 kB -- 21.8 kB
ClickAwayListener -- 4.13 kB -- 1.66 kB
Collapse -- 77.3 kB -- 22.8 kB
colorManipulator -- 3.88 kB -- 1.52 kB
Container -- 68 kB -- 21.3 kB
CssBaseline -- 66.8 kB -- 21 kB
Dialog -- 87.9 kB -- 27.5 kB
DialogActions -- 66.9 kB -- 21 kB
DialogContent -- 67 kB -- 21 kB
DialogContentText -- 68.8 kB -- 21.7 kB
DialogTitle -- 69.1 kB -- 21.8 kB
Divider -- 67.5 kB -- 21.3 kB
docs:/ -- 11.7 kB -- -1 B
docs:/_app -- 37 kB -- -1 B
Drawer -- 89.9 kB -- 27.4 kB
ExpansionPanel -- 76.4 kB -- 24.1 kB
ExpansionPanelActions -- 66.9 kB -- 21 kB
ExpansionPanelDetails -- 66.8 kB -- 20.9 kB
ExpansionPanelSummary -- 82.6 kB -- 26.3 kB
Fab -- 81.2 kB -- 25.4 kB
Fade -- 32.6 kB -- 9.84 kB
FilledInput -- 78.5 kB -- 24.5 kB
FormControl -- 69.2 kB -- 21.6 kB
FormControlLabel -- 70.3 kB -- 22.1 kB
FormGroup -- 66.8 kB -- 20.8 kB
FormHelperText -- 68.1 kB -- 21.2 kB
FormLabel -- 68.3 kB -- 21.2 kB
Grid -- 69.9 kB -- 22 kB
GridList -- 67.3 kB -- 21.2 kB
GridListTile -- 68.5 kB -- 21.5 kB
GridListTileBar -- 68 kB -- 21.4 kB
Grow -- 33.3 kB -- 10.1 kB
Hidden -- 70.8 kB -- 22.3 kB
Icon -- 67.6 kB -- 21.2 kB
IconButton -- 80.6 kB -- 25.2 kB
Input -- 77.5 kB -- 24.2 kB
InputAdornment -- 69.9 kB -- 22.1 kB
InputBase -- 75.5 kB -- 23.8 kB
InputLabel -- 70.1 kB -- 21.7 kB
LinearProgress -- 70.2 kB -- 21.7 kB
Link -- 71.4 kB -- 22.7 kB
List -- 67.1 kB -- 20.9 kB
ListItem -- 81.5 kB -- 25.6 kB
ListItemAvatar -- 66.9 kB -- 21 kB
ListItemIcon -- 67 kB -- 21 kB
ListItemSecondaryAction -- 66.8 kB -- 21 kB
ListItemText -- 69.8 kB -- 22 kB
ListSubheader -- 67.6 kB -- 21.3 kB
Menu -- 93.6 kB -- 28.9 kB
MenuItem -- 82.6 kB -- 25.9 kB
MenuList -- 70.8 kB -- 22.2 kB
MobileStepper -- 72.7 kB -- 22.9 kB
Modal -- 15 kB -- 5.25 kB
NativeSelect -- 81.8 kB -- 26 kB
NoSsr -- 2.18 kB -- 1.03 kB
OutlinedInput -- 79.6 kB -- 24.8 kB
Pagination -- 88.9 kB -- 27.5 kB
PaginationItem -- 85.3 kB -- 26.4 kB
Paper -- 67.2 kB -- 21 kB
Popover -- 87.9 kB -- 27.2 kB
Popper -- 28.8 kB -- 10.3 kB
Portal -- 2.87 kB -- 1.29 kB
Radio -- 87.6 kB -- 27.9 kB
RadioGroup -- 68.7 kB -- 21.4 kB
Rating -- 75.4 kB -- 24.3 kB
RootRef -- 4.64 kB -- 1.76 kB
ScopedCssBaseline -- 67.7 kB -- 21.2 kB
Select -- 121 kB -- 36 kB
Skeleton -- 67.8 kB -- 21.4 kB
Slide -- 34.7 kB -- 10.4 kB
Slider -- 80.8 kB -- 25.8 kB
Snackbar -- 80.7 kB -- 25.3 kB
SnackbarContent -- 68.3 kB -- 21.3 kB
SpeedDial -- 90.7 kB -- 28.8 kB
SpeedDialAction -- 122 kB -- 39 kB
SpeedDialIcon -- 69.4 kB -- 21.8 kB
Step -- 67.5 kB -- 21.2 kB
StepButton -- 86.7 kB -- 27.5 kB
StepConnector -- 67.5 kB -- 21.3 kB
StepContent -- 74 kB -- 23.2 kB
StepIcon -- 69.4 kB -- 21.7 kB
StepLabel -- 73.3 kB -- 22.7 kB
Stepper -- 69.7 kB -- 22 kB
styles/createMuiTheme -- 22.3 kB -- 7.72 kB
SvgIcon -- 67.8 kB -- 21.2 kB
SwipeableDrawer -- 97.3 kB -- 30.6 kB
Switch -- 85.8 kB -- 27.1 kB
Tab -- 80.8 kB -- 25.8 kB
Table -- 67.4 kB -- 21.2 kB
TableBody -- 66.9 kB -- 21 kB
TableCell -- 68.9 kB -- 21.7 kB
TableContainer -- 66.8 kB -- 20.9 kB
TableFooter -- 67 kB -- 21 kB
TableHead -- 66.9 kB -- 21 kB
TablePagination -- 147 kB -- 43.3 kB
TableRow -- 67.3 kB -- 21.2 kB
TableSortLabel -- 81.8 kB -- 26 kB
Tabs -- 90.4 kB -- 29.1 kB
TabScrollButton -- 81.4 kB -- 25.6 kB
TextareaAutosize -- 5.24 kB -- 2.19 kB
TextField -- 130 kB -- 38.1 kB
ToggleButton -- 80.5 kB -- 25.6 kB
ToggleButtonGroup -- 68 kB -- 21.4 kB
Toolbar -- 67.1 kB -- 21.1 kB
Tooltip -- 107 kB -- 33.7 kB
TreeItem -- 80.2 kB -- 25.5 kB
TreeView -- 73.3 kB -- 23.1 kB
Typography -- 68.4 kB -- 21.4 kB
useAutocomplete -- 15 kB -- 5.25 kB
useMediaQuery -- 2.57 kB -- 1.06 kB
useScrollTrigger -- 2.66 kB -- 1.08 kB
Zoom -- 32.7 kB -- 9.83 kB

Generated by 🚫 dangerJS against 6dad21d

@mbrookes mbrookes added the docs Improvements or additions to the documentation label May 1, 2020
@mbrookes
Copy link
Member

mbrookes commented May 1, 2020

The examples are consistent with the demos that import the css in the parent file, but I can see how this could trip someone up, so no issue with this change.

Could you remove the blank line between imports though? Thanks.

@joshwooding
Copy link
Member

Could you also add the import to PlainCssButtonDeep

joshwooding
joshwooding suggested changes May 2, 2020
View reviewed changes
Copy link
Member

@joshwooding joshwooding left a comment

Choose a reason for hiding this comment

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

Minor changes

@joshwooding joshwooding changed the title [docs] Plain css, little detail [docs] Add css imports to style library interoperability examples May 2, 2020
@oliviertassinari
Copy link
Member

oliviertassinari commented May 3, 2020 •
edited

Would this assume too much about how developer loads the CSS? For Global CSS, I would expect it to fail in the most common cases, won't you get CSS Modules kick-in here? https://github.com/css-modules/css-modules mangling the class names?

@weisk
Copy link
Contributor Author

weisk commented May 3, 2020 •
edited

Would this assume too much about how developer loads the CSS? For Global CSS, I would expect it to fail in the most common cases

This is just a conventional way of 'putting stuff together', It wouldn't matter much whether you import it here or in the root component, but it sure makes things clearer. It does not guarantee any scoping or priority.... because this document is describing how to customize using plain ol' css actually. I'd expect someone using this to understand about CSS specificity rules...

won't you get CSS Modules kick-in here? https://github.com/css-modules/css-modules mangling the class names? I think that we should close.

From https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/, quote:

Note: this feature is available with react-scripts@2.0.0 and higher.
This project supports CSS Modules alongside regular stylesheets using the [name].module.css file naming convention. CSS Modules allows the scoping of CSS by automatically creating a unique classname of the format [filename]_[classname]__[hash].

@oliviertassinari
Copy link
Member

oliviertassinari commented May 3, 2020 •
edited

@weisk Awesome the behavior seems identical between CRA, Next.js and Gatsby. Great to see the consolation on this topic :D

@oliviertassinari oliviertassinari changed the title [docs] Add css imports to style library interoperability examples [docs] Make CSS interoperability example easier to use May 3, 2020
@weisk
Copy link
Contributor Author

weisk commented May 3, 2020

@oliviertassinari Happy to help :D

@joshwooding joshwooding changed the title [docs] Make CSS interoperability example easier to use [docs] Make CSS interoperability examples easier to use May 3, 2020
@joshwooding joshwooding merged commit beabed8 into mui:master May 3, 2020
@joshwooding
Copy link
Member

@weisk Thanks! It's a great first contribution to Material-UI 🎉

This was referenced May 6, 2020
Merged
Merged
Merged
Merged
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@oliviertassinari oliviertassinari oliviertassinari approved these changes

@joshwooding joshwooding joshwooding approved these changes

Assignees
No one assigned
Labels
docs Improvements or additions to the documentation
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@weisk @mui-pr-bot @mbrookes @joshwooding @oliviertassinari