From abdfc175407d800fffc465c4635788f87b5b4bd7 Mon Sep 17 00:00:00 2001 From: Matt Date: Sat, 1 Feb 2020 22:45:12 +0000 Subject: [PATCH] [docs] Update the translations (#19514) --- crowdin.yml | 2 +- docs/src/modules/components/backers-aa.md | 18 +- docs/src/modules/components/backers-de.md | 22 +- docs/src/modules/components/backers-es.md | 16 +- docs/src/modules/components/backers-fr.md | 22 +- docs/src/modules/components/backers-ja.md | 16 +- docs/src/modules/components/backers-pt.md | 24 +- docs/src/modules/components/backers-ru.md | 18 +- docs/src/modules/components/backers-zh.md | 20 +- docs/src/pages/company/about/about-aa.md | 21 - docs/src/pages/company/about/about-de.md | 21 - docs/src/pages/company/about/about-es.md | 21 - docs/src/pages/company/about/about-fr.md | 21 - docs/src/pages/company/about/about-ja.md | 21 - docs/src/pages/company/about/about-pt.md | 21 - docs/src/pages/company/about/about-ru.md | 21 - docs/src/pages/company/about/about-zh.md | 21 - docs/src/pages/company/contact/contact-aa.md | 9 - docs/src/pages/company/contact/contact-de.md | 9 - docs/src/pages/company/contact/contact-es.md | 9 - docs/src/pages/company/contact/contact-fr.md | 9 - docs/src/pages/company/contact/contact-ja.md | 9 - docs/src/pages/company/contact/contact-pt.md | 9 - docs/src/pages/company/contact/contact-ru.md | 9 - docs/src/pages/company/contact/contact-zh.md | 9 - .../about-the-lab/about-the-lab-es.md | 12 +- docs/src/pages/components/alert/alert-aa.md | 48 +- docs/src/pages/components/alert/alert-de.md | 2 + docs/src/pages/components/alert/alert-es.md | 24 +- docs/src/pages/components/alert/alert-fr.md | 6 +- docs/src/pages/components/alert/alert-ja.md | 2 + docs/src/pages/components/alert/alert-pt.md | 2 + docs/src/pages/components/alert/alert-ru.md | 16 +- docs/src/pages/components/alert/alert-zh.md | 42 +- .../pages/components/app-bar/app-bar-de.md | 6 +- .../pages/components/app-bar/app-bar-pt.md | 4 +- .../autocomplete/autocomplete-aa.md | 91 ++-- .../autocomplete/autocomplete-de.md | 81 ++-- .../autocomplete/autocomplete-es.md | 29 +- .../autocomplete/autocomplete-fr.md | 29 +- .../autocomplete/autocomplete-ja.md | 27 +- .../autocomplete/autocomplete-pt.md | 27 +- .../autocomplete/autocomplete-ru.md | 35 +- .../autocomplete/autocomplete-zh.md | 45 +- .../pages/components/avatars/avatars-de.md | 4 +- .../pages/components/backdrop/backdrop-es.md | 6 +- .../pages/components/backdrop/backdrop-ru.md | 10 +- .../pages/components/backdrop/backdrop-zh.md | 6 +- docs/src/pages/components/badges/badges-de.md | 2 +- docs/src/pages/components/badges/badges-es.md | 22 +- docs/src/pages/components/badges/badges-ru.md | 18 +- docs/src/pages/components/box/box-es.md | 4 +- .../components/breadcrumbs/breadcrumbs-zh.md | 4 +- .../button-group/button-group-aa.md | 26 ++ .../button-group/button-group-de.md | 26 ++ .../button-group/button-group-es.md | 26 ++ .../button-group/button-group-fr.md | 26 ++ .../button-group/button-group-ja.md | 26 ++ .../button-group/button-group-pt.md | 26 ++ .../button-group/button-group-ru.md | 26 ++ .../button-group/button-group-zh.md | 26 ++ .../pages/components/buttons/buttons-aa.md | 116 ++--- .../pages/components/buttons/buttons-de.md | 84 +--- .../pages/components/buttons/buttons-es.md | 70 +-- .../pages/components/buttons/buttons-fr.md | 70 +-- .../pages/components/buttons/buttons-ja.md | 72 +-- .../pages/components/buttons/buttons-pt.md | 84 +--- .../pages/components/buttons/buttons-ru.md | 72 +-- .../pages/components/buttons/buttons-zh.md | 82 +--- docs/src/pages/components/cards/cards-aa.md | 8 +- docs/src/pages/components/cards/cards-de.md | 10 +- docs/src/pages/components/cards/cards-es.md | 8 +- docs/src/pages/components/cards/cards-fr.md | 8 +- docs/src/pages/components/cards/cards-ja.md | 8 +- docs/src/pages/components/cards/cards-pt.md | 8 +- docs/src/pages/components/cards/cards-ru.md | 8 +- docs/src/pages/components/cards/cards-zh.md | 8 +- .../components/checkboxes/checkboxes-de.md | 2 +- .../click-away-listener-de.md | 4 +- .../css-baseline/css-baseline-de.md | 4 +- .../css-baseline/css-baseline-ru.md | 2 +- .../pages/components/dialogs/dialogs-de.md | 2 +- .../pages/components/dividers/dividers-de.md | 4 +- .../pages/components/drawers/drawers-de.md | 2 +- .../pages/components/drawers/drawers-es.md | 32 +- .../expansion-panels/expansion-panels-de.md | 2 +- .../floating-action-button-aa.md | 34 ++ .../floating-action-button-de.md | 34 ++ .../floating-action-button-es.md | 34 ++ .../floating-action-button-fr.md | 34 ++ .../floating-action-button-ja.md | 34 ++ .../floating-action-button-pt.md | 34 ++ .../floating-action-button-ru.md | 34 ++ .../floating-action-button-zh.md | 34 ++ docs/src/pages/components/grid/grid-de.md | 4 +- docs/src/pages/components/links/links-de.md | 2 +- docs/src/pages/components/lists/lists-aa.md | 6 +- docs/src/pages/components/lists/lists-de.md | 6 +- docs/src/pages/components/lists/lists-es.md | 6 +- docs/src/pages/components/lists/lists-fr.md | 6 +- docs/src/pages/components/lists/lists-ja.md | 6 +- docs/src/pages/components/lists/lists-pt.md | 6 +- docs/src/pages/components/lists/lists-ru.md | 6 +- docs/src/pages/components/lists/lists-zh.md | 6 +- docs/src/pages/components/menus/menus-fr.md | 22 +- docs/src/pages/components/modal/modal-de.md | 6 +- docs/src/pages/components/popper/popper-de.md | 8 +- .../radio-buttons/radio-buttons-de.md | 2 +- .../radio-buttons/radio-buttons-zh.md | 4 +- docs/src/pages/components/rating/rating-aa.md | 2 +- docs/src/pages/components/rating/rating-de.md | 12 +- docs/src/pages/components/rating/rating-es.md | 2 +- docs/src/pages/components/rating/rating-fr.md | 2 +- docs/src/pages/components/rating/rating-ja.md | 2 +- docs/src/pages/components/rating/rating-pt.md | 2 +- docs/src/pages/components/rating/rating-ru.md | 2 +- docs/src/pages/components/rating/rating-zh.md | 6 +- .../pages/components/selects/selects-de.md | 4 +- .../pages/components/skeleton/skeleton-de.md | 4 +- .../pages/components/skeleton/skeleton-ru.md | 22 +- docs/src/pages/components/slider/slider-aa.md | 12 +- docs/src/pages/components/slider/slider-de.md | 8 +- docs/src/pages/components/slider/slider-es.md | 6 + docs/src/pages/components/slider/slider-fr.md | 6 + docs/src/pages/components/slider/slider-ja.md | 8 +- docs/src/pages/components/slider/slider-pt.md | 8 +- docs/src/pages/components/slider/slider-ru.md | 6 + docs/src/pages/components/slider/slider-zh.md | 6 + .../components/snackbars/snackbars-de.md | 2 +- .../pages/components/steppers/steppers-aa.md | 4 +- .../pages/components/steppers/steppers-de.md | 4 +- .../pages/components/steppers/steppers-es.md | 4 +- .../pages/components/steppers/steppers-fr.md | 4 +- .../pages/components/steppers/steppers-ja.md | 4 +- .../pages/components/steppers/steppers-pt.md | 4 +- .../pages/components/steppers/steppers-ru.md | 4 +- .../pages/components/steppers/steppers-zh.md | 4 +- .../pages/components/switches/switches-aa.md | 2 +- .../pages/components/switches/switches-de.md | 4 +- .../pages/components/switches/switches-es.md | 2 +- .../pages/components/switches/switches-fr.md | 2 +- .../pages/components/switches/switches-ja.md | 2 +- .../pages/components/switches/switches-pt.md | 2 +- .../pages/components/switches/switches-ru.md | 2 +- .../pages/components/switches/switches-zh.md | 2 +- docs/src/pages/components/tables/tables-de.md | 4 +- docs/src/pages/components/tables/tables-es.md | 14 +- docs/src/pages/components/tables/tables-ja.md | 2 +- docs/src/pages/components/tables/tables-ru.md | 4 +- .../components/text-fields/text-fields-aa.md | 24 +- .../components/text-fields/text-fields-de.md | 22 +- .../components/text-fields/text-fields-es.md | 14 +- .../components/text-fields/text-fields-fr.md | 14 +- .../components/text-fields/text-fields-ja.md | 20 +- .../components/text-fields/text-fields-pt.md | 20 +- .../components/text-fields/text-fields-ru.md | 18 +- .../components/text-fields/text-fields-zh.md | 16 +- .../textarea-autosize/textarea-autosize-de.md | 4 +- .../toggle-button/toggle-button-de.md | 2 +- .../toggle-button/toggle-button-es.md | 10 +- .../pages/components/tooltips/tooltips-de.md | 2 +- .../components/transitions/transitions-aa.md | 12 +- .../components/transitions/transitions-de.md | 12 +- .../components/transitions/transitions-es.md | 10 +- .../components/transitions/transitions-fr.md | 10 +- .../components/transitions/transitions-ja.md | 12 +- .../components/transitions/transitions-pt.md | 12 +- .../components/transitions/transitions-ru.md | 10 +- .../components/transitions/transitions-zh.md | 12 +- .../components/typography/typography-pt.md | 8 +- .../use-media-query/use-media-query-de.md | 8 +- .../default-theme/default-theme-aa.md | 6 +- .../default-theme/default-theme-de.md | 6 +- .../default-theme/default-theme-es.md | 6 +- .../default-theme/default-theme-fr.md | 6 +- .../default-theme/default-theme-ja.md | 6 +- .../default-theme/default-theme-pt.md | 6 +- .../default-theme/default-theme-ru.md | 6 +- .../default-theme/default-theme-zh.md | 6 +- .../pages/customization/palette/palette-aa.md | 18 +- .../pages/customization/palette/palette-de.md | 10 +- .../pages/customization/palette/palette-es.md | 10 +- .../pages/customization/palette/palette-fr.md | 10 +- .../pages/customization/palette/palette-ja.md | 10 +- .../pages/customization/palette/palette-pt.md | 10 +- .../pages/customization/palette/palette-ru.md | 14 +- .../pages/customization/palette/palette-zh.md | 10 +- .../pages/customization/theming/theming-ru.md | 2 +- .../customization/typography/typography-aa.md | 43 +- .../customization/typography/typography-de.md | 33 +- .../customization/typography/typography-es.md | 27 +- .../customization/typography/typography-fr.md | 27 +- .../customization/typography/typography-ja.md | 35 +- .../customization/typography/typography-pt.md | 37 +- .../customization/typography/typography-ru.md | 27 +- .../customization/typography/typography-zh.md | 27 +- .../discover-more/changelog/changelog-de.md | 2 +- .../discover-more/changelog/changelog-es.md | 4 +- .../related-projects/related-projects-aa.md | 64 +-- .../related-projects/related-projects-de.md | 44 +- .../related-projects/related-projects-es.md | 12 +- .../related-projects/related-projects-fr.md | 12 +- .../related-projects/related-projects-ja.md | 12 +- .../related-projects/related-projects-pt.md | 34 +- .../related-projects/related-projects-ru.md | 12 +- .../related-projects/related-projects-zh.md | 12 +- docs/src/pages/discover-more/team/team-aa.md | 2 +- docs/src/pages/discover-more/team/team-de.md | 2 +- docs/src/pages/discover-more/team/team-es.md | 2 +- docs/src/pages/discover-more/team/team-fr.md | 2 +- docs/src/pages/discover-more/team/team-ja.md | 2 +- docs/src/pages/discover-more/team/team-pt.md | 2 +- docs/src/pages/discover-more/team/team-ru.md | 2 +- docs/src/pages/discover-more/team/team-zh.md | 2 +- .../pages/discover-more/vision/vision-de.md | 2 +- .../pages/discover-more/vision/vision-es.md | 2 +- .../pages/discover-more/vision/vision-fr.md | 2 +- .../pages/discover-more/vision/vision-ru.md | 2 +- .../pages/discover-more/vision/vision-zh.md | 2 +- .../example-projects/example-projects-aa.md | 9 +- .../example-projects/example-projects-de.md | 9 +- .../example-projects/example-projects-es.md | 9 +- .../example-projects/example-projects-fr.md | 15 +- .../example-projects/example-projects-ja.md | 9 +- .../example-projects/example-projects-pt.md | 9 +- .../example-projects/example-projects-ru.md | 9 +- .../example-projects/example-projects-zh.md | 9 +- docs/src/pages/getting-started/faq/faq-ru.md | 2 +- .../supported-platforms-aa.md | 2 +- .../supported-platforms-de.md | 2 +- .../supported-platforms-es.md | 2 +- .../supported-platforms-fr.md | 2 +- .../supported-platforms-ja.md | 2 +- .../supported-platforms-pt.md | 2 +- .../supported-platforms-ru.md | 2 +- .../supported-platforms-zh.md | 2 +- .../getting-started/templates/templates-aa.md | 2 +- .../getting-started/templates/templates-de.md | 2 +- .../getting-started/templates/templates-es.md | 2 +- .../getting-started/templates/templates-fr.md | 2 +- .../getting-started/templates/templates-ja.md | 2 +- .../getting-started/templates/templates-pt.md | 2 +- .../getting-started/templates/templates-ru.md | 2 +- .../getting-started/templates/templates-zh.md | 4 +- .../pages/getting-started/usage/usage-aa.md | 2 +- .../pages/getting-started/usage/usage-de.md | 2 +- .../pages/getting-started/usage/usage-es.md | 6 +- .../pages/getting-started/usage/usage-fr.md | 2 +- .../pages/getting-started/usage/usage-ja.md | 2 +- .../pages/getting-started/usage/usage-pt.md | 2 +- .../pages/getting-started/usage/usage-ru.md | 4 +- .../pages/getting-started/usage/usage-zh.md | 2 +- .../interoperability/interoperability-aa.md | 210 ++++++--- .../interoperability/interoperability-de.md | 418 ++++++++++++----- .../interoperability/interoperability-es.md | 396 ++++++++++++---- .../interoperability/interoperability-fr.md | 396 ++++++++++++---- .../interoperability/interoperability-ja.md | 399 ++++++++++++---- .../interoperability/interoperability-pt.md | 420 ++++++++++++----- .../interoperability/interoperability-ru.md | 396 ++++++++++++---- .../interoperability/interoperability-zh.md | 424 +++++++++++++----- .../guides/localization/localization-aa.md | 46 +- .../guides/localization/localization-de.md | 4 + .../guides/localization/localization-es.md | 4 + .../guides/localization/localization-fr.md | 4 + .../guides/localization/localization-ja.md | 4 + .../guides/localization/localization-pt.md | 4 + .../guides/localization/localization-ru.md | 4 + .../guides/localization/localization-zh.md | 4 + docs/src/pages/guides/testing/testing-aa.md | 2 +- docs/src/pages/guides/testing/testing-de.md | 2 +- docs/src/pages/guides/testing/testing-es.md | 2 +- docs/src/pages/guides/testing/testing-fr.md | 2 +- docs/src/pages/guides/testing/testing-ja.md | 2 +- docs/src/pages/guides/testing/testing-pt.md | 2 +- docs/src/pages/guides/testing/testing-ru.md | 2 +- docs/src/pages/guides/testing/testing-zh.md | 2 +- docs/src/pages/styles/api/api-aa.md | 2 +- docs/src/pages/styles/api/api-de.md | 2 +- docs/src/pages/styles/api/api-es.md | 2 +- docs/src/pages/styles/api/api-fr.md | 2 +- docs/src/pages/styles/api/api-ja.md | 2 +- docs/src/pages/styles/api/api-pt.md | 2 +- docs/src/pages/styles/api/api-ru.md | 2 +- docs/src/pages/styles/api/api-zh.md | 2 +- docs/src/pages/styles/basics/basics-de.md | 12 +- docs/src/pages/styles/basics/basics-ru.md | 2 +- docs/src/pages/system/palette/palette-aa.md | 4 +- docs/src/pages/system/palette/palette-de.md | 2 - docs/src/pages/system/palette/palette-es.md | 2 - docs/src/pages/system/palette/palette-fr.md | 2 - docs/src/pages/system/palette/palette-ja.md | 2 - docs/src/pages/system/palette/palette-pt.md | 2 - docs/src/pages/system/palette/palette-ru.md | 2 - docs/src/pages/system/palette/palette-zh.md | 2 - docs/src/pages/system/spacing/spacing-de.md | 2 +- .../pages/system/typography/typography-de.md | 4 +- docs/src/pages/versions/versions-aa.md | 2 +- docs/src/pages/versions/versions-de.md | 16 +- docs/src/pages/versions/versions-es.md | 2 +- docs/src/pages/versions/versions-fr.md | 2 +- docs/src/pages/versions/versions-ja.md | 2 +- docs/src/pages/versions/versions-pt.md | 28 +- docs/src/pages/versions/versions-ru.md | 2 +- docs/src/pages/versions/versions-zh.md | 12 +- docs/translations/translations-aa.json | 9 +- docs/translations/translations-de.json | 37 +- docs/translations/translations-es.json | 9 +- docs/translations/translations-fr.json | 25 +- docs/translations/translations-ja.json | 9 +- docs/translations/translations-pt.json | 23 +- docs/translations/translations-ru.json | 9 +- docs/translations/translations-zh.json | 13 +- 312 files changed, 4544 insertions(+), 2443 deletions(-) delete mode 100644 docs/src/pages/company/about/about-aa.md delete mode 100644 docs/src/pages/company/about/about-de.md delete mode 100644 docs/src/pages/company/about/about-es.md delete mode 100644 docs/src/pages/company/about/about-fr.md delete mode 100644 docs/src/pages/company/about/about-ja.md delete mode 100644 docs/src/pages/company/about/about-pt.md delete mode 100644 docs/src/pages/company/about/about-ru.md delete mode 100644 docs/src/pages/company/about/about-zh.md delete mode 100644 docs/src/pages/company/contact/contact-aa.md delete mode 100644 docs/src/pages/company/contact/contact-de.md delete mode 100644 docs/src/pages/company/contact/contact-es.md delete mode 100644 docs/src/pages/company/contact/contact-fr.md delete mode 100644 docs/src/pages/company/contact/contact-ja.md delete mode 100644 docs/src/pages/company/contact/contact-pt.md delete mode 100644 docs/src/pages/company/contact/contact-ru.md delete mode 100644 docs/src/pages/company/contact/contact-zh.md create mode 100644 docs/src/pages/components/button-group/button-group-aa.md create mode 100644 docs/src/pages/components/button-group/button-group-de.md create mode 100644 docs/src/pages/components/button-group/button-group-es.md create mode 100644 docs/src/pages/components/button-group/button-group-fr.md create mode 100644 docs/src/pages/components/button-group/button-group-ja.md create mode 100644 docs/src/pages/components/button-group/button-group-pt.md create mode 100644 docs/src/pages/components/button-group/button-group-ru.md create mode 100644 docs/src/pages/components/button-group/button-group-zh.md create mode 100644 docs/src/pages/components/floating-action-button/floating-action-button-aa.md create mode 100644 docs/src/pages/components/floating-action-button/floating-action-button-de.md create mode 100644 docs/src/pages/components/floating-action-button/floating-action-button-es.md create mode 100644 docs/src/pages/components/floating-action-button/floating-action-button-fr.md create mode 100644 docs/src/pages/components/floating-action-button/floating-action-button-ja.md create mode 100644 docs/src/pages/components/floating-action-button/floating-action-button-pt.md create mode 100644 docs/src/pages/components/floating-action-button/floating-action-button-ru.md create mode 100644 docs/src/pages/components/floating-action-button/floating-action-button-zh.md diff --git a/crowdin.yml b/crowdin.yml index 537c07dc3e4fbc..40658da901fdf0 100644 --- a/crowdin.yml +++ b/crowdin.yml @@ -6,7 +6,7 @@ files: - /docs/src/pages/premium-themes/*/**/* - /docs/src/pages/discover-more/backers/* - /docs/src/pages/discover-more/roadmap/* - - /docs/src/pages/company/* + - /docs/src/pages/company/**/* translation: /%original_path%/%file_name%-%two_letters_code%.%file_extension% - source: /docs/translations/*.json ignore: diff --git a/docs/src/modules/components/backers-aa.md b/docs/src/modules/components/backers-aa.md index 0b2ac7fd60fcbc..df9199401faeb9 100644 --- a/docs/src/modules/components/backers-aa.md +++ b/docs/src/modules/components/backers-aa.md @@ -1,30 +1,22 @@

crwdns105429:0crwdne105429:0

-crwdns105431:0crwdne105431:0 crwdns105433:0crwdne105433:0 +crwdns108775:0crwdne108775:0 ### crwdns105435:0crwdne105435:0 *crwdns105437:0crwdne105437:0* -crwdns107397:0crwdne107397:0 crwdns105441:0crwdne105441:0 - ### crwdns105443:0crwdne105443:0 -crwdns105445:0crwdne105445:0 -

- crwdns105451:0crwdne105451:0 - crwdns105459:0crwdne105459:0 + crwdns108781:0crwdne108781:0 + crwdns108789:0crwdne108789:0

-crwdns105463:0crwdne105463:0 -

- crwdns106857:0crwdne106857:0 + crwdns108797:0crwdne108797:0

-crwdns107399:0crwdne107399:0 - ### crwdns105483:0crwdne105483:0 -crwdns105485:0crwdne105485:0 \ No newline at end of file +crwdns108801:0crwdne108801:0 \ No newline at end of file diff --git a/docs/src/modules/components/backers-de.md b/docs/src/modules/components/backers-de.md index 6a60df23028712..9c690e91c3ab56 100644 --- a/docs/src/modules/components/backers-de.md +++ b/docs/src/modules/components/backers-de.md @@ -1,30 +1,22 @@ -

Material-UI's sponsors

+

Sponsoren von Material-UI

-The core of Material-UI is a [crowd-funded](/discover-more/backers/) open-source project, licensed under the permissive MIT license. Sponsorship increases the rate of bug fixes, documentation improvements, and feature development. +The continued development and maintenance of Material-UI is made possible by these generous sponsors: -### Diamond 💎 +### Diamant 💎 -*3/3 slots available* - -Diamond Sponsors are those who have pledged $2,000/month or more to Material-UI. Please contact us at diamond@material-ui.com to subscribe to this tier. +*3/3 Plätze verfügbar* ### Gold 🏆 -über [Patreon](https://www.patreon.com/oliviertassinari) -

tidelift - bitsrc + bitsrc

-über [OpenCollective](https://opencollective.com/material-ui) -

- call-em-all + call-em-all

-Gold Sponsors are those who have pledged $500/month or more to Material-UI. - ### Es gibt noch mehr! -Sehen Sie sich die vollständige Liste [unserer Unterstützer](/discover-more/backers/) an. \ No newline at end of file +See the full list of [our sponsors](/discover-more/backers/), and learn how you can contribute to the future of Material-UI. \ No newline at end of file diff --git a/docs/src/modules/components/backers-es.md b/docs/src/modules/components/backers-es.md index 5e78d82a0fbfe1..96cc3d5dbb28ba 100644 --- a/docs/src/modules/components/backers-es.md +++ b/docs/src/modules/components/backers-es.md @@ -1,30 +1,22 @@

Patrocinadores de Material-UI

-The core of Material-UI is a [crowd-funded](/discover-more/backers/) open-source project, licensed under the permissive MIT license. El patrocinio aumenta la tasa de corrección de errores, mejoras de documentación y desarrollo de funciones futuras. +The continued development and maintenance of Material-UI is made possible by these generous sponsors: ### Diamante 💎 *%s espacios disponibles* -Diamond Sponsors are those who have pledged $2,000/month or more to Material-UI. Por favor, póngase en contacto con nosotros en diamond@material-ui.com para suscribirse a este nivel. - ### Oro 🏆 -via [Patreon](https://www.patreon.com/oliviertassinari) -

tidelift - bitsrc + bitsrc

-a través de [OpenCollective](https://opencollective.com/material-ui) -

- call-em-all + call-em-all

-Gold Sponsors are those who have pledged $500/month or more to Material-UI. - ### ¡Y aún hay más! -Revise la lista de todos [nuestros patrocinadores](/discover-more/backers/). \ No newline at end of file +See the full list of [our sponsors](/discover-more/backers/), and learn how you can contribute to the future of Material-UI. \ No newline at end of file diff --git a/docs/src/modules/components/backers-fr.md b/docs/src/modules/components/backers-fr.md index 0dee854a760e33..79375574c8182e 100644 --- a/docs/src/modules/components/backers-fr.md +++ b/docs/src/modules/components/backers-fr.md @@ -1,30 +1,22 @@

Sponsors de Material-UI

-The core of Material-UI is a [crowd-funded](/discover-more/backers/) open-source project, licensed under the permissive MIT license. Sponsorship increases the rate of bug fixes, documentation improvements, and feature development. +The continued development and maintenance of Material-UI is made possible by these generous sponsors: -### Diamond 💎 +### Diamant 💎 -*3/3 slots available* +*3/3 places disponibles* -Diamond Sponsors are those who have pledged $2,000/month or more to Material-UI. Please contact us at diamond@material-ui.com to subscribe to this tier. - -### Gold 🏆 - -via [Patreon](https://www.patreon.com/oliviertassinari) +### Or 🏆

tidelift - bitsrc + bitsrc

-via [OpenCollective](https://opencollective.com/material-ui) -

- call-em-all + call-em-all

-Gold Sponsors are those who have pledged $500/month or more to Material-UI. - ### Il y en a plus ! -Voir la liste complète de [nos contributeurs](/discover-more/backers/) . \ No newline at end of file +See the full list of [our sponsors](/discover-more/backers/), and learn how you can contribute to the future of Material-UI. \ No newline at end of file diff --git a/docs/src/modules/components/backers-ja.md b/docs/src/modules/components/backers-ja.md index e408d2b0497577..fdc210b285b380 100644 --- a/docs/src/modules/components/backers-ja.md +++ b/docs/src/modules/components/backers-ja.md @@ -1,30 +1,22 @@

Material-UI's sponsors

-The core of Material-UI is a [crowd-funded](/discover-more/backers/) open-source project, licensed under the permissive MIT license. Sponsorship increases the rate of bug fixes, documentation improvements, and feature development. +The continued development and maintenance of Material-UI is made possible by these generous sponsors: ### Diamond 💎 *3/3 slots available* -Diamond Sponsors are those who have pledged $2,000/month or more to Material-UI. Please contact us at diamond@material-ui.com to subscribe to this tier. - ### Gold 🏆 -[パトロン](https://www.patreon.com/oliviertassinari)によるものです。 -

tidelift - bitsrc + bitsrc

-[OpenCollective](https://opencollective.com/material-ui)によるものです。 -

- call-em-all + call-em-all

-Gold Sponsors are those who have pledged $500/month or more to Material-UI. - ### もっとあります！ -[私たちのサポーター](/discover-more/backers/)のリストを見て下さい。 \ No newline at end of file +See the full list of [our sponsors](/discover-more/backers/), and learn how you can contribute to the future of Material-UI. \ No newline at end of file diff --git a/docs/src/modules/components/backers-pt.md b/docs/src/modules/components/backers-pt.md index 7f7df357e8ae41..8b9a437996525b 100644 --- a/docs/src/modules/components/backers-pt.md +++ b/docs/src/modules/components/backers-pt.md @@ -1,30 +1,22 @@ -

Material-UI's sponsors

+

Patrocinadores do Material-UI

-The core of Material-UI is a [crowd-funded](/discover-more/backers/) open-source project, licensed under the permissive MIT license. Sponsorship increases the rate of bug fixes, documentation improvements, and feature development. +The continued development and maintenance of Material-UI is made possible by these generous sponsors: -### Diamond 💎 +### Diamante 💎 -*3/3 slots available* +*3/3 espaços disponíveis* -Diamond Sponsors are those who have pledged $2,000/month or more to Material-UI. Please contact us at diamond@material-ui.com to subscribe to this tier. - -### Gold 🏆 - -via [Patreon](https://www.patreon.com/oliviertassinari) +### Ouro 🏆

tidelift - bitsrc + bitsrc

-via [OpenCollective](https://opencollective.com/material-ui) -

- call-em-all + call-em-all

-Gold Sponsors are those who have pledged $500/month or more to Material-UI. - ### E tem mais! -Veja a lista completa de [nossos apoiadores](/discover-more/backers/). \ No newline at end of file +See the full list of [our sponsors](/discover-more/backers/), and learn how you can contribute to the future of Material-UI. \ No newline at end of file diff --git a/docs/src/modules/components/backers-ru.md b/docs/src/modules/components/backers-ru.md index 93d42ccf6efb97..6a85086795c99a 100644 --- a/docs/src/modules/components/backers-ru.md +++ b/docs/src/modules/components/backers-ru.md @@ -1,30 +1,22 @@

Спонсоры Material-UI

-Material-UI - это проект с открытым исходным кодом, [финансируемый общественностью](/discover-more/backers/), имеющий лицензию открытого программного обеспечения (MIT licese). Спонсорство ускоряет исправление ошибок, улучшение документации и разработку нового функционала. +The continued development and maintenance of Material-UI is made possible by these generous sponsors: ### Алмазные 💎 *3/3 мест свободно* -Diamond Sponsors are those who have pledged $2,000/month or more to Material-UI. Пожалуйста, свяжитесь с нами по адресу diamond@material-ui.com, чтобы стать одни из них. - ### Золотые 🏆 -на [Patreon](https://www.patreon.com/oliviertassinari) -

- Tidelift - Bit + tidelift + bitsrc

-на [OpenCollective](https://opencollective.com/material-ui) -

- call-em-all + call-em-all

-Gold Sponsors are those who have pledged $500/month or more to Material-UI. - ### Узнать больше! -Посмотреть полный список [спонсоров](/discover-more/backers/). \ No newline at end of file +See the full list of [our sponsors](/discover-more/backers/), and learn how you can contribute to the future of Material-UI. \ No newline at end of file diff --git a/docs/src/modules/components/backers-zh.md b/docs/src/modules/components/backers-zh.md index fd42a60de1e2fa..8690ee01f65ce0 100644 --- a/docs/src/modules/components/backers-zh.md +++ b/docs/src/modules/components/backers-zh.md @@ -1,30 +1,22 @@

Material-UI 的赞助商

-Material-UI 是一个[众筹](/discover-more/backers/)的开源项目，根据MIT协议进行许可。 赞助可用加快我们错误修复，文档改进和功能开发的速度。 +The continued development and maintenance of Material-UI is made possible by these generous sponsors: ### 钻石级💎 *3/3 个位置可用* -Diamond Sponsors are those who have pledged $2,000/month or more to Material-UI. 请联系邮箱 diamond@material-ui.com 以订阅此级别。 - ### 金杯级 🏆 -通过 [Patreon](https://www.patreon.com/oliviertassinari) -

- tidelift - bitsrc + tidelift + bitsrc

-通过 [OpenCollective](https://opencollective.com/material-ui) -

- call-em-all + call-em-all

-Gold Sponsors are those who have pledged $500/month or more to Material-UI. - -### 其实还有更多！ +### 不仅如此！ -查看[我们赞助商](/discover-more/backers/)的完整名单。 \ No newline at end of file +See the full list of [our sponsors](/discover-more/backers/), and learn how you can contribute to the future of Material-UI. \ No newline at end of file diff --git a/docs/src/pages/company/about/about-aa.md b/docs/src/pages/company/about/about-aa.md deleted file mode 100644 index d4dfdcd49d9736..00000000000000 --- a/docs/src/pages/company/about/about-aa.md +++ /dev/null @@ -1,21 +0,0 @@ -# crwdns107527:0crwdne107527:0 - -

crwdns107529:0crwdne107529:0

- -## crwdns107531:0crwdne107531:0 - -crwdns107533:0crwdne107533:0 crwdns107535:0crwdne107535:0 crwdns107537:0crwdne107537:0 - -## crwdns107539:0crwdne107539:0 - -crwdns107541:0crwdne107541:0 crwdns107543:0crwdne107543:0 - -## crwdns107545:0crwdne107545:0 - -crwdns107547:0crwdne107547:0 - -## crwdns107549:0crwdne107549:0 - -crwdns107551:0crwdne107551:0 - -crwdns107553:0crwdne107553:0 diff --git a/docs/src/pages/company/about/about-de.md b/docs/src/pages/company/about/about-de.md deleted file mode 100644 index a3b29726021227..00000000000000 --- a/docs/src/pages/company/about/about-de.md +++ /dev/null @@ -1,21 +0,0 @@ -# About Us - -

We’re on a mission to make building UIs with React fun.

- -## Our Mission - -Our company is focused on making React UIs development easier, better, and accessible to more people. We build open source and commercial tools used by many hundreds of thousands of developers in production. We're proud not only of the products we make, but also the community and partnerships we've cultivated with other developers and companies. - -## Our Vision - -Our vision is to provide React components for faster and easier web development. [Read more](/discover-more/vision/). - -## Our Values - -Our core values include transparency (our work is public most of the time); creating a safe, high-trust team; building incredible developer experiences; maintaining a healthy working environment; and helping to deliver web experiences that feel amazing to use on every device and connection type. - -## Our Story - -Material-UI started back in 2014 to unify React and Material Design. - -Today, Material-UI has grown to become one of the world's most popular React UI libraries – backed by a vibrant community of more than 1M developers in over 180 countries. diff --git a/docs/src/pages/company/about/about-es.md b/docs/src/pages/company/about/about-es.md deleted file mode 100644 index a3b29726021227..00000000000000 --- a/docs/src/pages/company/about/about-es.md +++ /dev/null @@ -1,21 +0,0 @@ -# About Us - -

We’re on a mission to make building UIs with React fun.

- -## Our Mission - -Our company is focused on making React UIs development easier, better, and accessible to more people. We build open source and commercial tools used by many hundreds of thousands of developers in production. We're proud not only of the products we make, but also the community and partnerships we've cultivated with other developers and companies. - -## Our Vision - -Our vision is to provide React components for faster and easier web development. [Read more](/discover-more/vision/). - -## Our Values - -Our core values include transparency (our work is public most of the time); creating a safe, high-trust team; building incredible developer experiences; maintaining a healthy working environment; and helping to deliver web experiences that feel amazing to use on every device and connection type. - -## Our Story - -Material-UI started back in 2014 to unify React and Material Design. - -Today, Material-UI has grown to become one of the world's most popular React UI libraries – backed by a vibrant community of more than 1M developers in over 180 countries. diff --git a/docs/src/pages/company/about/about-fr.md b/docs/src/pages/company/about/about-fr.md deleted file mode 100644 index a3b29726021227..00000000000000 --- a/docs/src/pages/company/about/about-fr.md +++ /dev/null @@ -1,21 +0,0 @@ -# About Us - -

We’re on a mission to make building UIs with React fun.

- -## Our Mission - -Our company is focused on making React UIs development easier, better, and accessible to more people. We build open source and commercial tools used by many hundreds of thousands of developers in production. We're proud not only of the products we make, but also the community and partnerships we've cultivated with other developers and companies. - -## Our Vision - -Our vision is to provide React components for faster and easier web development. [Read more](/discover-more/vision/). - -## Our Values - -Our core values include transparency (our work is public most of the time); creating a safe, high-trust team; building incredible developer experiences; maintaining a healthy working environment; and helping to deliver web experiences that feel amazing to use on every device and connection type. - -## Our Story - -Material-UI started back in 2014 to unify React and Material Design. - -Today, Material-UI has grown to become one of the world's most popular React UI libraries – backed by a vibrant community of more than 1M developers in over 180 countries. diff --git a/docs/src/pages/company/about/about-ja.md b/docs/src/pages/company/about/about-ja.md deleted file mode 100644 index a3b29726021227..00000000000000 --- a/docs/src/pages/company/about/about-ja.md +++ /dev/null @@ -1,21 +0,0 @@ -# About Us - -

We’re on a mission to make building UIs with React fun.

- -## Our Mission - -Our company is focused on making React UIs development easier, better, and accessible to more people. We build open source and commercial tools used by many hundreds of thousands of developers in production. We're proud not only of the products we make, but also the community and partnerships we've cultivated with other developers and companies. - -## Our Vision - -Our vision is to provide React components for faster and easier web development. [Read more](/discover-more/vision/). - -## Our Values - -Our core values include transparency (our work is public most of the time); creating a safe, high-trust team; building incredible developer experiences; maintaining a healthy working environment; and helping to deliver web experiences that feel amazing to use on every device and connection type. - -## Our Story - -Material-UI started back in 2014 to unify React and Material Design. - -Today, Material-UI has grown to become one of the world's most popular React UI libraries – backed by a vibrant community of more than 1M developers in over 180 countries. diff --git a/docs/src/pages/company/about/about-pt.md b/docs/src/pages/company/about/about-pt.md deleted file mode 100644 index a3b29726021227..00000000000000 --- a/docs/src/pages/company/about/about-pt.md +++ /dev/null @@ -1,21 +0,0 @@ -# About Us - -

We’re on a mission to make building UIs with React fun.

- -## Our Mission - -Our company is focused on making React UIs development easier, better, and accessible to more people. We build open source and commercial tools used by many hundreds of thousands of developers in production. We're proud not only of the products we make, but also the community and partnerships we've cultivated with other developers and companies. - -## Our Vision - -Our vision is to provide React components for faster and easier web development. [Read more](/discover-more/vision/). - -## Our Values - -Our core values include transparency (our work is public most of the time); creating a safe, high-trust team; building incredible developer experiences; maintaining a healthy working environment; and helping to deliver web experiences that feel amazing to use on every device and connection type. - -## Our Story - -Material-UI started back in 2014 to unify React and Material Design. - -Today, Material-UI has grown to become one of the world's most popular React UI libraries – backed by a vibrant community of more than 1M developers in over 180 countries. diff --git a/docs/src/pages/company/about/about-ru.md b/docs/src/pages/company/about/about-ru.md deleted file mode 100644 index a3b29726021227..00000000000000 --- a/docs/src/pages/company/about/about-ru.md +++ /dev/null @@ -1,21 +0,0 @@ -# About Us - -

We’re on a mission to make building UIs with React fun.

- -## Our Mission - -Our company is focused on making React UIs development easier, better, and accessible to more people. We build open source and commercial tools used by many hundreds of thousands of developers in production. We're proud not only of the products we make, but also the community and partnerships we've cultivated with other developers and companies. - -## Our Vision - -Our vision is to provide React components for faster and easier web development. [Read more](/discover-more/vision/). - -## Our Values - -Our core values include transparency (our work is public most of the time); creating a safe, high-trust team; building incredible developer experiences; maintaining a healthy working environment; and helping to deliver web experiences that feel amazing to use on every device and connection type. - -## Our Story - -Material-UI started back in 2014 to unify React and Material Design. - -Today, Material-UI has grown to become one of the world's most popular React UI libraries – backed by a vibrant community of more than 1M developers in over 180 countries. diff --git a/docs/src/pages/company/about/about-zh.md b/docs/src/pages/company/about/about-zh.md deleted file mode 100644 index a3b29726021227..00000000000000 --- a/docs/src/pages/company/about/about-zh.md +++ /dev/null @@ -1,21 +0,0 @@ -# About Us - -

We’re on a mission to make building UIs with React fun.

- -## Our Mission - -Our company is focused on making React UIs development easier, better, and accessible to more people. We build open source and commercial tools used by many hundreds of thousands of developers in production. We're proud not only of the products we make, but also the community and partnerships we've cultivated with other developers and companies. - -## Our Vision - -Our vision is to provide React components for faster and easier web development. [Read more](/discover-more/vision/). - -## Our Values - -Our core values include transparency (our work is public most of the time); creating a safe, high-trust team; building incredible developer experiences; maintaining a healthy working environment; and helping to deliver web experiences that feel amazing to use on every device and connection type. - -## Our Story - -Material-UI started back in 2014 to unify React and Material Design. - -Today, Material-UI has grown to become one of the world's most popular React UI libraries – backed by a vibrant community of more than 1M developers in over 180 countries. diff --git a/docs/src/pages/company/contact/contact-aa.md b/docs/src/pages/company/contact/contact-aa.md deleted file mode 100644 index 78d1760b5d9de9..00000000000000 --- a/docs/src/pages/company/contact/contact-aa.md +++ /dev/null @@ -1,9 +0,0 @@ -# crwdns107555:0crwdne107555:0 - -

crwdns107557:0crwdne107557:0

- -crwdns107559:0crwdne107559:0 - -- [crwdns107563:0crwdne107563:0](crwdns107561:0crwdne107561:0) -- crwdns107565:0crwdne107565:0 -- crwdns107567:0crwdne107567:0 diff --git a/docs/src/pages/company/contact/contact-de.md b/docs/src/pages/company/contact/contact-de.md deleted file mode 100644 index 6bef4930784bba..00000000000000 --- a/docs/src/pages/company/contact/contact-de.md +++ /dev/null @@ -1,9 +0,0 @@ -# Contact Us - -

We’re all ears.

- -Please choose a topic below related to your inquiry: - -- [Help & Support](/getting-started/support/) -- Email enquiries: [contact@material-ui.com](mailto:contact@material-ui.com) -- Our address:

**Material-UI SAS**
128 rue de la boetie
75008 Paris
France diff --git a/docs/src/pages/company/contact/contact-es.md b/docs/src/pages/company/contact/contact-es.md deleted file mode 100644 index 6bef4930784bba..00000000000000 --- a/docs/src/pages/company/contact/contact-es.md +++ /dev/null @@ -1,9 +0,0 @@ -# Contact Us - -

We’re all ears.

- -Please choose a topic below related to your inquiry: - -- [Help & Support](/getting-started/support/) -- Email enquiries: [contact@material-ui.com](mailto:contact@material-ui.com) -- Our address:

**Material-UI SAS**
128 rue de la boetie
75008 Paris
France diff --git a/docs/src/pages/company/contact/contact-fr.md b/docs/src/pages/company/contact/contact-fr.md deleted file mode 100644 index 6bef4930784bba..00000000000000 --- a/docs/src/pages/company/contact/contact-fr.md +++ /dev/null @@ -1,9 +0,0 @@ -# Contact Us - -

We’re all ears.

- -Please choose a topic below related to your inquiry: - -- [Help & Support](/getting-started/support/) -- Email enquiries: [contact@material-ui.com](mailto:contact@material-ui.com) -- Our address:

**Material-UI SAS**
128 rue de la boetie
75008 Paris
France diff --git a/docs/src/pages/company/contact/contact-ja.md b/docs/src/pages/company/contact/contact-ja.md deleted file mode 100644 index 6bef4930784bba..00000000000000 --- a/docs/src/pages/company/contact/contact-ja.md +++ /dev/null @@ -1,9 +0,0 @@ -# Contact Us - -

We’re all ears.

- -Please choose a topic below related to your inquiry: - -- [Help & Support](/getting-started/support/) -- Email enquiries: [contact@material-ui.com](mailto:contact@material-ui.com) -- Our address:

**Material-UI SAS**
128 rue de la boetie
75008 Paris
France diff --git a/docs/src/pages/company/contact/contact-pt.md b/docs/src/pages/company/contact/contact-pt.md deleted file mode 100644 index 6bef4930784bba..00000000000000 --- a/docs/src/pages/company/contact/contact-pt.md +++ /dev/null @@ -1,9 +0,0 @@ -# Contact Us - -

We’re all ears.

- -Please choose a topic below related to your inquiry: - -- [Help & Support](/getting-started/support/) -- Email enquiries: [contact@material-ui.com](mailto:contact@material-ui.com) -- Our address:

**Material-UI SAS**
128 rue de la boetie
75008 Paris
France diff --git a/docs/src/pages/company/contact/contact-ru.md b/docs/src/pages/company/contact/contact-ru.md deleted file mode 100644 index 6bef4930784bba..00000000000000 --- a/docs/src/pages/company/contact/contact-ru.md +++ /dev/null @@ -1,9 +0,0 @@ -# Contact Us - -

We’re all ears.

- -Please choose a topic below related to your inquiry: - -- [Help & Support](/getting-started/support/) -- Email enquiries: [contact@material-ui.com](mailto:contact@material-ui.com) -- Our address:

**Material-UI SAS**
128 rue de la boetie
75008 Paris
France diff --git a/docs/src/pages/company/contact/contact-zh.md b/docs/src/pages/company/contact/contact-zh.md deleted file mode 100644 index 6bef4930784bba..00000000000000 --- a/docs/src/pages/company/contact/contact-zh.md +++ /dev/null @@ -1,9 +0,0 @@ -# Contact Us - -

We’re all ears.

- -Please choose a topic below related to your inquiry: - -- [Help & Support](/getting-started/support/) -- Email enquiries: [contact@material-ui.com](mailto:contact@material-ui.com) -- Our address:

**Material-UI SAS**
128 rue de la boetie
75008 Paris
France diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-es.md b/docs/src/pages/components/about-the-lab/about-the-lab-es.md index 6ae1f21bb489f1..c900bf47acb5b2 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab-es.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab-es.md @@ -1,20 +1,20 @@ -# About the lab +# Acerca de lab -

This package hosts the incubator components that are not yet ready to move to the core.

+

Este paquete almacena componentes en desarrollo, que todavía no están listos para estar en core.

## Instalación -Install the package in your project directory with: +Instala el paquete en el directorio de su proyecto con: ```sh -// with npm +// con npm npm install @material-ui/lab -// with yarn +// con yarn yarn add @material-ui/lab ``` -The lab has a peer dependency on the core components. Si aún no estás usando Material-UI en tu proyecto, puedes instalarlo con: +El lab tiene puntos de dependencias de los componentes core. Si aún no estás usando Material-UI en tu proyecto, puedes instalarlo con: ```sh // usando npm diff --git a/docs/src/pages/components/alert/alert-aa.md b/docs/src/pages/components/alert/alert-aa.md index ea07750206b4e2..2af9ffc46379d6 100644 --- a/docs/src/pages/components/alert/alert-aa.md +++ b/docs/src/pages/components/alert/alert-aa.md @@ -7,70 +7,72 @@ components: crwdns107403:0crwdne107403:0

crwdns107407:0crwdne107407:0

+crwdns107575:0crwdne107575:0 + ## crwdns107409:0crwdne107409:0 -crwdns107411:0crwdne107411:0 +crwdns107577:0crwdne107577:0 -crwdns107413:0crwdne107413:0 +crwdns107579:0crwdne107579:0 ## crwdns107415:0crwdne107415:0 -crwdns107417:0crwdne107417:0 +crwdns107581:0crwdne107581:0 -crwdns107419:0crwdne107419:0 +crwdns107583:0crwdne107583:0 ## crwdns107421:0crwdne107421:0 -crwdns107423:0crwdne107423:0 crwdns107425:0crwdne107425:0 +crwdns107585:0crwdne107585:0 crwdns107587:0crwdne107587:0 -crwdns107427:0crwdne107427:0 crwdns107429:0crwdne107429:0 +crwdns107589:0crwdne107589:0 crwdns107591:0crwdne107591:0 -crwdns107431:0crwdne107431:0 +crwdns107593:0crwdne107593:0 ### crwdns107433:0crwdne107433:0 -crwdns107435:0crwdne107435:0 +crwdns107595:0crwdne107595:0 -crwdns107437:0crwdne107437:0 +crwdns107597:0crwdne107597:0 ## crwdns107439:0crwdne107439:0 -crwdns107441:0crwdne107441:0 crwdns107443:0crwdne107443:0 +crwdns107599:0crwdne107599:0 crwdns107601:0crwdne107601:0 -crwdns107445:0crwdne107445:0 crwdns107447:0crwdne107447:0 +crwdns107603:0crwdne107603:0 crwdns107605:0crwdne107605:0 -crwdns107449:0crwdne107449:0 +crwdns107607:0crwdne107607:0 -crwdns107451:0crwdne107451:0 +crwdns107609:0crwdne107609:0 ## crwdns107453:0crwdne107453:0 -crwdns107455:0crwdne107455:0 +crwdns107611:0crwdne107611:0 ### crwdns107457:0crwdne107457:0 -crwdns107459:0crwdne107459:0 +crwdns107613:0crwdne107613:0 ### crwdns107461:0crwdne107461:0 -crwdns107463:0crwdne107463:0 +crwdns107615:0crwdne107615:0 ## crwdns107465:0crwdne107465:0 -crwdns107467:0crwdne107467:0 +crwdns107617:0crwdne107617:0 ## crwdns107469:0crwdne107469:0 -crwdns107471:0crwdne107471:0 +crwdns107619:0crwdne107619:0 -crwdns107473:0crwdne107473:0 +crwdns107621:0crwdne107621:0 ## crwdns107475:0crwdne107475:0 -crwdns107477:0crwdne107477:0 +crwdns107623:0crwdne107623:0 -crwdns107479:0crwdne107479:0 crwdns107481:0crwdne107481:0 +crwdns107625:0crwdne107625:0 crwdns107627:0crwdne107627:0 -crwdns107483:0crwdne107483:0 crwdns107485:0crwdne107485:0 +crwdns107629:0crwdne107629:0 crwdns107631:0crwdne107631:0 -crwdns107487:0crwdne107487:0 +crwdns107633:0crwdne107633:0 diff --git a/docs/src/pages/components/alert/alert-de.md b/docs/src/pages/components/alert/alert-de.md index 92c0afcdbbbe66..d1895b6bbf0cd5 100644 --- a/docs/src/pages/components/alert/alert-de.md +++ b/docs/src/pages/components/alert/alert-de.md @@ -7,6 +7,8 @@ components: Alert

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

+**Note:** This component is not documented in the [Material Design guidelines](https://material.io/), but Material-UI supports it. + ## Simple alerts The alert offers four severity levels that set a distinctive icon and color. diff --git a/docs/src/pages/components/alert/alert-es.md b/docs/src/pages/components/alert/alert-es.md index 02b2fb037ebbdd..dc34ec6ffe84c6 100644 --- a/docs/src/pages/components/alert/alert-es.md +++ b/docs/src/pages/components/alert/alert-es.md @@ -1,41 +1,43 @@ --- -title: Alert React component +title: Componente Alert React components: Alert --- # Alert -

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

+

Un Alert muestra un breve mensaje importante de una forma que atrae la atención del usuario sin necesidad de interrumpir el trabajo al usuario.

-## Simple alerts +**Nota:** Este componente no está documentado en la pautas [Material Design](https://material.io/), pero Material-UI lo soporta. -The alert offers four severity levels that set a distinctive icon and color. +## Alert simples + +El componente Alert ofrece cuatro niveles de gravedad que establecen un icono y un color distintivos. {{"demo": "pages/components/alert/SimpleAlerts.js"}} ## Descripción -You can use the `AlertTitle` component to display a formatted title above the content. +Puede utilizar el componente `AlertTitle` para mostrar un título formateado por encima del contenido. {{"demo": "pages/components/alert/DescriptionAlerts.js"}} -## Actions +## Acciones -An alert can have an action, such as a close or undo button. It is rendered after the message, at the end of the alert. +El componente Alert puede tener una acción, como un botón cerrar o deshacer. Es rendereado después del mensaje, al final del Alert. -If an `onClose` callback is provided and no `action` prop is set, a close icon is displayed. The `action` prop can be used to provide an alternative action, for example using a Button or IconButton. +Si se proporciona una devolución de llamada `onClose` y no se establece ningún accesorio de `action`, se muestra un icono de cierre. El accesorio de `action` se puede usar para proporcionar una acción alternativa, por ejemplo, usando un Button o un IconButton. {{"demo": "pages/components/alert/ActionAlerts.js"}} -### Transition +### Transición -You can use a [transition component](/components/transitions/) such as `Collapse` to transition the appearance of the alert. +Puede utilizar el componente de [ transition ](/components/transitions/) como `Colapse` para la transición del componente Alert. {{"demo": "pages/components/alert/TransitionAlerts.js"}} ## Iconos -The `icon` prop allows you to add an icon to the beginning of the alert component. This will override the default icon for the specified severity. +El `icon` prop permite añadir un icono para el inicio del componente Alert. This will override the default icon for the specified severity. You can change the default severity to icon mapping with the `iconMapping` prop. This can be defined globally using [theme customization](/customization/globals/#default-props). diff --git a/docs/src/pages/components/alert/alert-fr.md b/docs/src/pages/components/alert/alert-fr.md index d17f314325e7af..3f12939bf216f2 100644 --- a/docs/src/pages/components/alert/alert-fr.md +++ b/docs/src/pages/components/alert/alert-fr.md @@ -5,9 +5,11 @@ components: Alert # Alert -

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

+

Une alerte affiche un message court et important d'une manière qui attire l'attention de l'utilisateur sans interrompre sa tâche.

-## Simple alerts +**Note:** This component is not documented in the [Material Design guidelines](https://material.io/), but Material-UI supports it. + +## Alertes simples The alert offers four severity levels that set a distinctive icon and color. diff --git a/docs/src/pages/components/alert/alert-ja.md b/docs/src/pages/components/alert/alert-ja.md index bb8c7c3ff203a3..0c4674ea3223b1 100644 --- a/docs/src/pages/components/alert/alert-ja.md +++ b/docs/src/pages/components/alert/alert-ja.md @@ -7,6 +7,8 @@ components: Alert

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

+**Note:** This component is not documented in the [Material Design guidelines](https://material.io/), but Material-UI supports it. + ## Simple alerts The alert offers four severity levels that set a distinctive icon and color. diff --git a/docs/src/pages/components/alert/alert-pt.md b/docs/src/pages/components/alert/alert-pt.md index 356f4b0e0679c1..81566020416309 100644 --- a/docs/src/pages/components/alert/alert-pt.md +++ b/docs/src/pages/components/alert/alert-pt.md @@ -7,6 +7,8 @@ components: Alert

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

+**Note:** This component is not documented in the [Material Design guidelines](https://material.io/), but Material-UI supports it. + ## Simple alerts The alert offers four severity levels that set a distinctive icon and color. diff --git a/docs/src/pages/components/alert/alert-ru.md b/docs/src/pages/components/alert/alert-ru.md index f9d474331edd5b..eec8f2c1b50a79 100644 --- a/docs/src/pages/components/alert/alert-ru.md +++ b/docs/src/pages/components/alert/alert-ru.md @@ -1,27 +1,29 @@ --- -title: Alert React component +title: Компонент Alert components: Alert --- # Alert -

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

+

Alert показывает короткое и важное сообщение для того, чтобы привлечь внимание пользователя, не отвлекая его от задачи.

-## Simple alerts +**Примечание:** Этот компонент не задокументирован в [гайдлайнах Material Design](https://material.io/), но Material-UI поддерживает его. -The alert offers four severity levels that set a distinctive icon and color. +## Простейшие предупреждения + +Alert предлагает 4 уровня предупреждения с уникальным цветом и значком. {{"demo": "pages/components/alert/SimpleAlerts.js"}} ## Описание -You can use the `AlertTitle` component to display a formatted title above the content. +Вы можете использовать `AlertTitle`, чтобы отобразить заголовок над содержимым. {{"demo": "pages/components/alert/DescriptionAlerts.js"}} -## Actions +## Действия -An alert can have an action, such as a close or undo button. It is rendered after the message, at the end of the alert. +Alert может иметь действие, например кнопку закрытия или отмены. Действие рендерится после сообщения, в конце Alert. If an `onClose` callback is provided and no `action` prop is set, a close icon is displayed. The `action` prop can be used to provide an alternative action, for example using a Button or IconButton. diff --git a/docs/src/pages/components/alert/alert-zh.md b/docs/src/pages/components/alert/alert-zh.md index c092878cd75771..14534cd2a56694 100644 --- a/docs/src/pages/components/alert/alert-zh.md +++ b/docs/src/pages/components/alert/alert-zh.md @@ -1,57 +1,59 @@ --- -title: Alert React component -components: Alert +title: 提醒组件 +components: 提醒 --- -# Alert +# 提醒 -

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

+

「提醒」是简短且重要的信息，在不影响用户操作的同时能够吸引用户的注意力。

-## Simple alerts +**注意：**这个组件不在[《Material Design 指南》](https://material.io/)中，但它是被 Material-UI 支持的。 -The alert offers four severity levels that set a distinctive icon and color. +## 简单的提醒 + +一共有四种不同程度的「提醒」，每种都有自己独特的颜色和图标。 {{"demo": "pages/components/alert/SimpleAlerts.js"}} ## 描述 -You can use the `AlertTitle` component to display a formatted title above the content. +在提醒内容的上面使用 `AlertTitle` 可以实现标题的格式化。 {{"demo": "pages/components/alert/DescriptionAlerts.js"}} -## Actions +## Actions（行为） -An alert can have an action, such as a close or undo button. It is rendered after the message, at the end of the alert. +一个「提醒」可以有一个行为，例如「关闭」或「撤销」按钮。 它在消息之后，「提醒」结束时被渲染。 -If an `onClose` callback is provided and no `action` prop is set, a close icon is displayed. The `action` prop can be used to provide an alternative action, for example using a Button or IconButton. +如果提供了 `onClose` 回调且没有设置 `action` 属性的话，「关闭」图标就会显示。 这个 `action` 行为可以用其他形式来完成，例如使用一个按钮或者图标按钮。 {{"demo": "pages/components/alert/ActionAlerts.js"}} -### Transition +### 过渡效果 -You can use a [transition component](/components/transitions/) such as `Collapse` to transition the appearance of the alert. +可以使用 [过渡组件](/components/transitions) ，如 `Collapse（展开）` 来实现「提醒」出现时的过渡效果。 {{"demo": "pages/components/alert/TransitionAlerts.js"}} ## Icons（图标） -The `icon` prop allows you to add an icon to the beginning of the alert component. This will override the default icon for the specified severity. +`icon`是指可以在「提醒」组件的开始的地方加一个图标。 以此来改变不同程度「提醒」的默认图标。 -You can change the default severity to icon mapping with the `iconMapping` prop. This can be defined globally using [theme customization](/customization/globals/#default-props). +通过使用 `iconMapping` 这种映射方法，可以改变不同程度的默认图标。 在[自定义主题](/customization/globals/#default-props)中可以进行全局设置。 -Setting the icon prop to false will remove the icon altogether. +把图标属性设置为 false 将会把图标都移除了。 {{"demo": "pages/components/alert/IconAlerts.js"}} ## 变种(Variants) -Two additional variants are available – outlined, and filled: +还可以实现「边框」和「填充」这两种变体。 -### Outlined +### 边框 {{"demo": "pages/components/alert/OutlinedAlerts.js"}} -### Filled +### 填充 {{"demo": "pages/components/alert/FilledAlerts.js"}} @@ -61,7 +63,7 @@ You can use the Snackbar to [display a toast](/components/snackbars/#customized- ## 颜色 -The `color` prop will override the default color for the specified severity. +`color` 属性用来改变不同程度「提醒」的默认颜色。 {{"demo": "pages/components/alert/ColorAlerts.js"}} @@ -69,7 +71,7 @@ The `color` prop will override the default color for the specified severity. (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert) -When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads. +动态显示组件时，大部分屏幕都会自动显示其内容。 此时，屏幕不会将页面加载时出现的提醒通知给用户。 Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (for example the visible text), or is included through alternative means, such as additional hidden text. diff --git a/docs/src/pages/components/app-bar/app-bar-de.md b/docs/src/pages/components/app-bar/app-bar-de.md index 17bfcc84614a45..7fdb86bfceffb1 100644 --- a/docs/src/pages/components/app-bar/app-bar-de.md +++ b/docs/src/pages/components/app-bar/app-bar-de.md @@ -49,7 +49,7 @@ A prominent app bar. When you render the app bar position fixed, the dimension of the element doesn't impact the rest of the page. This can cause some part of your content to be invisible, behind the app bar. Here are 3 possible solutions: -1. You can use `position="sticky"` instead of fixed. ⚠️ sticky is not supported by IE 11. +1. You can use `position="sticky"` instead of fixed. ⚠️ sticky wird vom IE 11 nicht unterstützt. 2. You can render a second `` component: ```jsx @@ -101,9 +101,9 @@ The app bar elevates on scroll to communicate that the user is not at the top of {{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true}} -### Back to top +### Zurück nach oben -A floating action buttons appears on scroll to make it easy to get back to the top of the page. +Beim Scrollen erscheint ein schwebender Button, um einfach wieder zum Seitenanfang zu gelangen. {{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true}} diff --git a/docs/src/pages/components/app-bar/app-bar-pt.md b/docs/src/pages/components/app-bar/app-bar-pt.md index 23339731a04819..64ed0bf397dcf9 100644 --- a/docs/src/pages/components/app-bar/app-bar-pt.md +++ b/docs/src/pages/components/app-bar/app-bar-pt.md @@ -9,9 +9,9 @@ components: AppBar, Toolbar, Menu A [barra de aplicativos superior](https://material.io/design/components/app-bars-top.html) provê conteúdo e ações relacionados à tela atual. Ela é utilizada para a identidade visual, títulos de tela, navegação, e ações. -It can transform into a contextual action bar or be used as a navbar. +Ela pode se transformar em uma barra de ações contextual ou ser utilizada como uma barra de navegação. -## App Bar simples +## Barra de Aplicativos Simples {{"demo": "pages/components/app-bar/ButtonAppBar.js", "bg": true}} diff --git a/docs/src/pages/components/autocomplete/autocomplete-aa.md b/docs/src/pages/components/autocomplete/autocomplete-aa.md index f10fb45a6db557..0d62fe04799329 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-aa.md +++ b/docs/src/pages/components/autocomplete/autocomplete-aa.md @@ -32,21 +32,23 @@ crwdns104506:0crwdne104506:0 ## crwdns104508:0crwdne104508:0 -crwdns104510:0crwdne104510:0 +crwdns107773:0crwdne107773:0 crwdns107775:0crwdne107775:0 -crwdns104512:0crwdne104512:0 +crwdns107777:0crwdne107777:0 + +crwdns107779:0crwdne107779:0 ## crwdns104514:0crwdne104514:0 -crwdns104516:0crwdne104516:0 +crwdns107781:0crwdne107781:0 ## crwdns104518:0crwdne104518:0 -crwdns104520:0crwdne104520:0 +crwdns107783:0crwdne107783:0 ## `crwdns104522:0crwdne104522:0` -crwdns104524:0crwdne104524:0 crwdns105112:0crwdne105112:0 crwdns104528:0crwdne104528:0 +crwdns107785:0crwdne107785:0 crwdns107787:0crwdne107787:0 crwdns107789:0crwdne107789:0 ```jsx crwdns104530:0crwdne104530:0 @@ -54,73 +56,73 @@ crwdns104530:0crwdne104530:0 - crwdns105108:0crwdne105108:0 -crwdns104534:0crwdne104534:0 +crwdns107791:0crwdne107791:0 ### crwdns104950:0crwdne104950:0 -crwdns104952:0crwdne104952:0 +crwdns107793:0crwdne107793:0 -crwdns104954:0crwdne104954:0 +crwdns107795:0crwdne107795:0 ## crwdns104542:0crwdne104542:0 -crwdns104544:0crwdne104544:0 +crwdns107797:0crwdne107797:0 ### crwdns104546:0crwdne104546:0 -crwdns104956:0crwdne104956:0 +crwdns107799:0crwdne107799:0 -crwdns104552:0crwdne104552:0 +crwdns107801:0crwdne107801:0 -crwdns104958:0crwdne104958:0 +crwdns107803:0crwdne107803:0 > crwdns104960:0crwdne104960:0 ## crwdns104554:0crwdne104554:0 -crwdns107221:0crwdne107221:0 +crwdns107805:0crwdne107805:0 -crwdns104964:0crwdne104964:0 +crwdns107807:0crwdne107807:0 ### crwdns104560:0crwdne104560:0 -crwdns104966:0crwdne104966:0 +crwdns107809:0crwdne107809:0 -crwdns104968:0crwdne104968:0 +crwdns107811:0crwdne107811:0 ### crwdns104566:0crwdne104566:0 -crwdns104970:0crwdne104970:0 +crwdns107813:0crwdne107813:0 ## crwdns106429:0crwdne106429:0 -crwdns106431:0crwdne106431:0 crwdns106433:0crwdne106433:0 +crwdns107815:0crwdne107815:0 crwdns107817:0crwdne107817:0 -crwdns106435:0crwdne106435:0 +crwdns107819:0crwdne107819:0 ## crwdns106437:0crwdne106437:0 -crwdns106439:0crwdne106439:0 +crwdns107821:0crwdne107821:0 -crwdns106441:0crwdne106441:0 +crwdns107823:0crwdne107823:0 -crwdns106443:0crwdne106443:0 +crwdns107825:0crwdne107825:0 ## crwdns106445:0crwdne106445:0 -crwdns106447:0crwdne106447:0 +crwdns107827:0crwdne107827:0 -crwdns106449:0crwdne106449:0 +crwdns107829:0crwdne107829:0 ## crwdns106451:0crwdne106451:0 -crwdns106453:0crwdne106453:0 crwdns106455:0crwdne106455:0 +crwdns107831:0crwdne107831:0 crwdns107833:0crwdne107833:0 ```js crwdns104588:0{ createFilterOptions }crwdne104588:0 ``` -crwdns106457:0crwdne106457:0 +crwdns107835:0crwdne107835:0 1. crwdns104592:0[optional]crwdne104592:0 - crwdns104594:0[optional]crwdne104594:0 crwdns104596:0crwdne104596:0 @@ -129,17 +131,17 @@ crwdns106457:0crwdne106457:0 - crwdns104604:0[optional]crwdne104604:0 - crwdns104606:0[optional]crwdne104606:0 crwdns104608:0crwdne104608:0 -crwdns106459:0crwdne106459:0 +crwdns107837:0crwdne107837:0 ```js crwdns104612:0{filterOptions}crwdne104612:0 ``` -crwdns106461:0crwdne106461:0 +crwdns107839:0crwdne107839:0 ### crwdns104994:0crwdne104994:0 -crwdns106463:0crwdne106463:0 crwdns106465:0crwdne106465:0 +crwdns107841:0crwdne107841:0 crwdns107843:0crwdne107843:0 ```jsx crwdns104620:0{ inputValue }crwdnd104620:0{filterOptions}crwdne104620:0 @@ -147,18 +149,37 @@ crwdns104620:0{ inputValue }crwdnd104620:0{filterOptions}crwdne104620:0 ## crwdns106467:0crwdne106467:0 -crwdns106469:0crwdne106469:0 crwdns106471:0crwdne106471:0 +crwdns107845:0crwdne107845:0 crwdns107847:0crwdne107847:0 -crwdns106473:0crwdne106473:0 +crwdns107849:0crwdne107849:0 ## crwdns106475:0crwdne106475:0 -### crwdns105008:0crwdne105008:0 +### crwdns107851:0crwdne107851:0 + +crwdns107853:0crwdne107853:0 crwdns107855:0crwdne107855:0 + +crwdns107857:0crwdne107857:0 + +crwdns107859:0crwdne107859:0 crwdns107861:0crwdne107861:0 + +- crwdns107863:0crwdne107863:0 crwdns107865:0crwdne107865:0 crwdns107867:0crwdne107867:0 +- crwdns107869:0crwdne107869:0 + crwdns107871:0{...params}crwdnd107871:0{{ + ...params.inputProps, + autoComplete: 'new-password', + }}crwdne107871:0 + +### crwdns107873:0crwdne107873:0 + +crwdns107875:0crwdne107875:0 crwdns107877:0crwdne107877:0 + +### crwdns107879:0crwdne107879:0 -crwdns106477:0crwdne106477:0 crwdns106479:0crwdne106479:0 +crwdns107881:0crwdne107881:0 crwdns107883:0crwdne107883:0 crwdns107885:0crwdne107885:0 ## crwdns106481:0crwdne106481:0 -crwdns106483:0crwdne106483:0 +crwdns107887:0crwdne107887:0 -crwdns106485:0crwdne106485:0 crwdns106487:0crwdne106487:0 \ No newline at end of file +crwdns107889:0crwdne107889:0 crwdns107891:0crwdne107891:0 \ No newline at end of file diff --git a/docs/src/pages/components/autocomplete/autocomplete-de.md b/docs/src/pages/components/autocomplete/autocomplete-de.md index badd4943767da9..c794d4d9342a2e 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-de.md +++ b/docs/src/pages/components/autocomplete/autocomplete-de.md @@ -7,7 +7,7 @@ components: TextField, Popper, Autocomplete

Die Autovervollständigung ist eine normale Texteingabe, die durch ein Panel mit vorgeschlagenen Optionen ergänzt wird.

-The widget is useful for setting the value of a single-line textbox in one of two types of scenarios: +Das Widget ist nützlich, um den Wert eines einzeiligen Textfeldes in einem von zwei Arten von Szenarien zu setzen: 1. The value for the textbox must be chosen from a predefined set of allowed values, e.g., a location field must contain a valid location name: [combo box](#combo-box). 2. The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, e.g., a search field may suggest similar or previous searches to save the user time: [free solo](#free-solo). @@ -18,21 +18,23 @@ The value must be chosen from a predefined set of allowed values. {{"demo": "pages/components/autocomplete/ComboBox.js"}} -### Playground +### Spielwiese -Each of the following examples demonstrate one feature of the Autocomplete component. +Die folgenden Beispiele demonstrieren je eine Funktion der Autocomplete-Komponente. {{"demo": "pages/components/autocomplete/Playground.js"}} -### Country select +### Länderauswahl -Choose one country between 248. +Wählen Sie ein Land aus 248. {{"demo": "pages/components/autocomplete/CountrySelect.js"}} ## Free solo -Set `freeSolo` to true so the textbox can contain any arbitrary value. +Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a search box with suggestions, e.g. Google search. + +However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus`. {{"demo": "pages/components/autocomplete/FreeSolo.js"}} @@ -62,29 +64,29 @@ import useAutocomplete from '@material-ui/lab/useAutocomplete'; Head to the [Customized Autocomplete](#customized-autocomplete) section for a customization example with the `Autocomplete` component instead of the hook. -## Asynchronous requests +## Asynchrone Anfragen {{"demo": "pages/components/autocomplete/Asynchronous.js"}} -### Google Maps place +### Google Maps Ort -A customized UI for Google Maps Places Autocomplete. +Eine angepasste Oberfläche für Google Maps Places Autovervollständigung. {{"demo": "pages/components/autocomplete/GoogleMaps.js"}} -For this demo, we need to load the [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/tutorial) API. +Für diese Demo müssen wir die [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/tutorial) API laden. -> ⚠️ Before you can start using the Google Maps JavaScript API, you must sign up and create a billing account. +> ⚠️ Bevor Sie die Google Maps JavaScript-API verwenden können, müssen Sie sich anmelden und ein Abrechnungskonto erstellen. -## Multiple values +## Mehrere Werte -Also known as tags, the user is allowed to enter more than one value. +Auch als Tags bekannt, darf der Benutzer mehr als einen Wert eingeben. {{"demo": "pages/components/autocomplete/Tags.js"}} -### Fixed options +### Feste Optionen -In the event that you need to lock certain tag so that they can't be removed in the interface, you can set the chips disabled. +Falls Sie bestimmte Tags sperren müssen, damit sie nicht in der Schnittstelle entfernt werden können, können Sie die Chips deaktivieren. {{"demo": "pages/components/autocomplete/FixedTags.js"}} @@ -94,13 +96,13 @@ In the event that you need to lock certain tag so that they can't be removed in ## Größen -Fancy smaller inputs? Use the `size` prop. +Fancy smaller inputs? Verwenden Sie die `size` Prop. {{"demo": "pages/components/autocomplete/Sizes.js"}} -## Customized Autocomplete +## Angepasste Autovervollständigung -This demo reproduces the GitHub's label picker: +Diese Demo reproduziert die Label-Auswahl von GitHub: {{"demo": "pages/components/autocomplete/GitHubLabel.js"}} @@ -112,24 +114,24 @@ The following demo relies on [autosuggest-highlight](https://github.com/moroshko {{"demo": "pages/components/autocomplete/Highlights.js"}} -## Custom filter +## Benutzerderfinierter Filter -The component exposes a factory to create a filter method that can provided to the `filerOption` prop. You can use it to change the default option filter behavior. +The component exposes a factory to create a filter method that can provided to the `filerOption` prop. Sie können es verwenden, um das Standard-Filterverhalten der Option zu ändern. ```js import { createFilterOptions } from '@material-ui/lab/Autocomplete'; ``` -It supports the following options: +Es unterstützt die folgenden Optionen: 1. `config` (*Object* [optional]): - `config.ignoreAccents` (*Boolean* [optional]): Defaults to `true`. Remove diacritics. - - `config.ignoreCase` (*Boolean* [optional]): Defaults to `true`. Lowercase everything. + - `config.ignoreCase` (*Boolean* [optional]): Defaults to `true`. Alles in Kleinbuchstaben. - `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`. - `config.stringify` (*Func* [optional]): Defaults to `JSON.stringify`. - - `config.trim ` (*Boolean* [optional]): Standardeinstellung ist `false`. Remove trailing spaces. + - `config.trim ` (*Boolean* [optional]): Standardeinstellung ist `false`. Abschließende Leerzeichen entfernen. -In the following demo, the options need to start with the query prefix: +In der folgenden Demo müssen die Optionen mit dem Abfragepräfix beginnen: ```js const filterOptions = createFilterOptions({ @@ -155,20 +157,43 @@ const filterOptions = (options, { inputValue }) => ``` -## Virtualization +## Virtualisierung -Search within 10,000 randomly generated options. The list is virtualized thanks to [react-window](https://github.com/bvaughn/react-window). +Suche innerhalb von 10.000 zufällig generierten Optionen. Die Liste ist virtualisiert dank [react-window](https://github.com/bvaughn/react-window). {{"demo": "pages/components/autocomplete/Virtualize.js"}} ## Einschränkungen +### autocomplete/autofill + +Die Browser haben Heuristiken, um den Benutzern zu helfen, die Formulareingaben auszufüllen. Es kann jedoch die UX der Komponente negativ beeinflussen. + +By default, the component disable the **autocomplete** feature (remembering what the user has typed for a given field in a previous session) with the `autoComplete="off"` attribute. + +Zusätzlich zur Speicherung der eingegebenen Werte kann der Browser aber auch **Autofill** Vorschläge vorschlagen (gespeichertes Login, Adresse oder Zahlungsinformationen). Falls Sie die automatische Füllung vermeiden möchten, können Sie Folgendes versuchen: + +- Name the input without leaking any information the browser can use. e.g. `id="field1"` instead of `id="country"`. Wenn Sie die ID leer lassen, verwendet die Komponente eine zufällige ID. +- Setze `autoComplete="neues Passwort"`: + jsx + + ### iOS VoiceOver -VoiceOver on iOS Safari doesn't support the `aria-owns` attribute very well. You can work around the issue with the `disablePortal` prop. +VoiceOver auf iOS Safari unterstützt das `aria-owns` Attribut nicht sehr gut. You can work around the issue with the `disablePortal` prop. + +### TypeScript + +To fully take advantage of type inference, you need to set the `multiple` prop to `undefined`, `false` or `true`. See [this discussion](https://github.com/mui-org/material-ui/pull/18854#discussion_r364215153) for more details. TypeScript könnte diesen Fehler in Zukunft lösen. ## Barrierefreiheit (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) -We encourage the usage of a label for the textbox. The component implements the WAI-ARIA authoring practices. \ No newline at end of file +Wir empfehlen die Verwendung eines Labels für die Textbox. Die Komponente implementiert die WAI-ARIA Autorenpraktiken. \ No newline at end of file diff --git a/docs/src/pages/components/autocomplete/autocomplete-es.md b/docs/src/pages/components/autocomplete/autocomplete-es.md index 1587d5f6fe0357..26cb9a8640df2a 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-es.md +++ b/docs/src/pages/components/autocomplete/autocomplete-es.md @@ -32,7 +32,9 @@ Choose one country between 248. ## Free solo -Set `freeSolo` to true so the textbox can contain any arbitrary value. +Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a search box with suggestions, e.g. Google search. + +However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus`. {{"demo": "pages/components/autocomplete/FreeSolo.js"}} @@ -108,7 +110,7 @@ Head to the [Customized hook](#customized-hook) section for a customization exam ## Destacados -La siguiente demostración se basa en [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), una pequeña utilidad (1 kB) para resaltar texto en componentes de autosuggest y autocompletar. +The following demo relies on [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), a small (1 kB) utility for highlighting text in autosuggest and autocomplete components. {{"demo": "pages/components/autocomplete/Highlights.js"}} @@ -163,10 +165,33 @@ Search within 10,000 randomly generated options. The list is virtualized thanks ## Limitaciones +### autocomplete/autofill + +The browsers have heuristics to help the users fill the form inputs. However, it can harm the UX of the component. + +By default, the component disable the **autocomplete** feature (remembering what the user has typed for a given field in a previous session) with the `autoComplete="off"` attribute. + +However, in addition to remembering past entered values, the browser might also propose **autofill** suggestions (saved login, address, or payment details). In the event you want the avoid autofill, you can try the following: + +- Name the input without leaking any information the browser can use. e.g. `id="field1"` instead of `id="country"`. If you leave the id empty, the component uses a random id. +- Set `autoComplete="new-password"`: + jsx + + ### iOS VoiceOver VoiceOver on iOS Safari doesn't support the `aria-owns` attribute very well. You can work around the issue with the `disablePortal` prop. +### TypeScript + +To fully take advantage of type inference, you need to set the `multiple` prop to `undefined`, `false` or `true`. See [this discussion](https://github.com/mui-org/material-ui/pull/18854#discussion_r364215153) for more details. TypeScript might solve this bug in the future. + ## Accesibilidad (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) diff --git a/docs/src/pages/components/autocomplete/autocomplete-fr.md b/docs/src/pages/components/autocomplete/autocomplete-fr.md index cc1174cc21c37d..68631a95a3f15d 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-fr.md +++ b/docs/src/pages/components/autocomplete/autocomplete-fr.md @@ -7,7 +7,7 @@ components: TextField, Popper, Autocomplete

La saisie semi-automatique est une entrée de texte normale améliorée par un panneau d'options suggérées.

-The widget is useful for setting the value of a single-line textbox in one of two types of scenarios: +Le widget est utile pour définir la valeur d'une zone de texte simple d'une seule ligne dans l'un des deux types de scénarios suivants: 1. The value for the textbox must be chosen from a predefined set of allowed values, e.g., a location field must contain a valid location name: [combo box](#combo-box). 2. The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, e.g., a search field may suggest similar or previous searches to save the user time: [free solo](#free-solo). @@ -32,7 +32,9 @@ Choose one country between 248. ## Free solo -Set `freeSolo` to true so the textbox can contain any arbitrary value. +Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a search box with suggestions, e.g. Google search. + +However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus`. {{"demo": "pages/components/autocomplete/FreeSolo.js"}} @@ -163,10 +165,33 @@ Search within 10,000 randomly generated options. The list is virtualized thanks ## Limites +### autocomplete/autofill + +The browsers have heuristics to help the users fill the form inputs. However, it can harm the UX of the component. + +By default, the component disable the **autocomplete** feature (remembering what the user has typed for a given field in a previous session) with the `autoComplete="off"` attribute. + +However, in addition to remembering past entered values, the browser might also propose **autofill** suggestions (saved login, address, or payment details). In the event you want the avoid autofill, you can try the following: + +- Name the input without leaking any information the browser can use. e.g. `id="field1"` instead of `id="country"`. If you leave the id empty, the component uses a random id. +- Set `autoComplete="new-password"`: + jsx + + ### iOS VoiceOver VoiceOver on iOS Safari doesn't support the `aria-owns` attribute very well. You can work around the issue with the `disablePortal` prop. +### TypeScript + +To fully take advantage of type inference, you need to set the `multiple` prop to `undefined`, `false` or `true`. See [this discussion](https://github.com/mui-org/material-ui/pull/18854#discussion_r364215153) for more details. TypeScript might solve this bug in the future. + ## Accessibilité (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) diff --git a/docs/src/pages/components/autocomplete/autocomplete-ja.md b/docs/src/pages/components/autocomplete/autocomplete-ja.md index 2e493e5c7a27e5..6c39226286bd8c 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-ja.md +++ b/docs/src/pages/components/autocomplete/autocomplete-ja.md @@ -32,7 +32,9 @@ Choose one country between 248. ## Free solo -Set `freeSolo` to true so the textbox can contain any arbitrary value. +Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a search box with suggestions, e.g. Google search. + +However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus`. {{"demo": "pages/components/autocomplete/FreeSolo.js"}} @@ -163,10 +165,33 @@ Search within 10,000 randomly generated options. The list is virtualized thanks ## 制限事項 +### autocomplete/autofill + +The browsers have heuristics to help the users fill the form inputs. However, it can harm the UX of the component. + +By default, the component disable the **autocomplete** feature (remembering what the user has typed for a given field in a previous session) with the `autoComplete="off"` attribute. + +However, in addition to remembering past entered values, the browser might also propose **autofill** suggestions (saved login, address, or payment details). In the event you want the avoid autofill, you can try the following: + +- Name the input without leaking any information the browser can use. e.g. `id="field1"` instead of `id="country"`. If you leave the id empty, the component uses a random id. +- Set `autoComplete="new-password"`: + jsx + + ### iOS VoiceOver VoiceOver on iOS Safari doesn't support the `aria-owns` attribute very well. You can work around the issue with the `disablePortal` prop. +### TypeScript + +To fully take advantage of type inference, you need to set the `multiple` prop to `undefined`, `false` or `true`. See [this discussion](https://github.com/mui-org/material-ui/pull/18854#discussion_r364215153) for more details. TypeScript might solve this bug in the future. + ## アクセシビリティ (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) diff --git a/docs/src/pages/components/autocomplete/autocomplete-pt.md b/docs/src/pages/components/autocomplete/autocomplete-pt.md index ab39ec4c55949f..bbfb388a8562fb 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-pt.md +++ b/docs/src/pages/components/autocomplete/autocomplete-pt.md @@ -32,7 +32,9 @@ Choose one country between 248. ## Free solo -Set `freeSolo` to true so the textbox can contain any arbitrary value. +Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a search box with suggestions, e.g. Google search. + +However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus`. {{"demo": "pages/components/autocomplete/FreeSolo.js"}} @@ -163,10 +165,33 @@ Search within 10,000 randomly generated options. The list is virtualized thanks ## Limitações +### autocomplete/autofill + +The browsers have heuristics to help the users fill the form inputs. However, it can harm the UX of the component. + +By default, the component disable the **autocomplete** feature (remembering what the user has typed for a given field in a previous session) with the `autoComplete="off"` attribute. + +However, in addition to remembering past entered values, the browser might also propose **autofill** suggestions (saved login, address, or payment details). In the event you want the avoid autofill, you can try the following: + +- Name the input without leaking any information the browser can use. e.g. `id="field1"` instead of `id="country"`. If you leave the id empty, the component uses a random id. +- Set `autoComplete="new-password"`: + jsx + + ### iOS VoiceOver VoiceOver on iOS Safari doesn't support the `aria-owns` attribute very well. You can work around the issue with the `disablePortal` prop. +### TypeScript + +To fully take advantage of type inference, you need to set the `multiple` prop to `undefined`, `false` or `true`. See [this discussion](https://github.com/mui-org/material-ui/pull/18854#discussion_r364215153) for more details. TypeScript might solve this bug in the future. + ## Acessibilidade (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) diff --git a/docs/src/pages/components/autocomplete/autocomplete-ru.md b/docs/src/pages/components/autocomplete/autocomplete-ru.md index a90cd0e1171cd6..38e83535bed046 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-ru.md +++ b/docs/src/pages/components/autocomplete/autocomplete-ru.md @@ -32,7 +32,9 @@ components: TextField, Popper, Autocomplete ## Бесплатное соло -Установите для `freeSolo` значение true, чтобы текстовое поле могло содержать любое произвольное значение. +Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a search box with suggestions, e.g. Google search. + +However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus`. {{"demo": "pages/components/autocomplete/FreeSolo.js"}} @@ -46,7 +48,7 @@ components: TextField, Popper, Autocomplete ## `useAutocomplete` -Для продвинутой кастомизации используйте `useAutocomplete()` хук. It accepts almost the same options as the Autocomplete component minus all the props related to the rendering of JSX. The Autocomplete component uses this hook internally. +For advanced customization use cases, we expose a `useAutocomplete()` hook. It accepts almost the same options as the Autocomplete component minus all the props related to the rendering of JSX. The Autocomplete component uses this hook internally. ```jsx import useAutocomplete from '@material-ui/lab/useAutocomplete'; @@ -84,7 +86,7 @@ Also known as tags, the user is allowed to enter more than one value. ### Фиксированные опции -В случае, если вам нужно зафиксировать определенный тег (так что он не мог быть удалён через интерфейс), вы можете установить chips в состояние disabled. +In the event that you need to lock certain tag so that they can't be removed in the interface, you can set the chips disabled. {{"demo": "pages/components/autocomplete/FixedTags.js"}} @@ -144,7 +146,7 @@ const filterOptions = createFilterOptions({ ### Дополнительные параметры -For richer filtering mechanisms, like fuzzy matching, it's recommended to look at [match-sorter](https://github.com/kentcdodds/match-sorter). For instance: +For richer filtering mechanisms, like fuzzy matching, it's recommended to look at [match-sorter](https://github.com/kentcdodds/match-sorter). Например: ```jsx import matchSorter from 'match-sorter'; @@ -157,16 +159,39 @@ const filterOptions = (options, { inputValue }) => ## Виртуализация -Поиск в 10000 случайно сгенерированных опций. Список виртуализирован благодаря [реагирующему окну](https://github.com/bvaughn/react-window). +Search within 10,000 randomly generated options. The list is virtualized thanks to [react-window](https://github.com/bvaughn/react-window). {{"demo": "pages/components/autocomplete/Virtualize.js"}} ## Ограничения +### autocomplete/autofill + +The browsers have heuristics to help the users fill the form inputs. However, it can harm the UX of the component. + +By default, the component disable the **autocomplete** feature (remembering what the user has typed for a given field in a previous session) with the `autoComplete="off"` attribute. + +However, in addition to remembering past entered values, the browser might also propose **autofill** suggestions (saved login, address, or payment details). In the event you want the avoid autofill, you can try the following: + +- Name the input without leaking any information the browser can use. e.g. `id="field1"` instead of `id="country"`. If you leave the id empty, the component uses a random id. +- Set `autoComplete="new-password"`: + jsx + + ### iOS VoiceOver VoiceOver on iOS Safari doesn't support the `aria-owns` attribute very well. You can work around the issue with the `disablePortal` prop. +### TypeScript + +To fully take advantage of type inference, you need to set the `multiple` prop to `undefined`, `false` or `true`. See [this discussion](https://github.com/mui-org/material-ui/pull/18854#discussion_r364215153) for more details. TypeScript might solve this bug in the future. + ## Доступность (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) diff --git a/docs/src/pages/components/autocomplete/autocomplete-zh.md b/docs/src/pages/components/autocomplete/autocomplete-zh.md index c31e437020a429..f98d0ca93422e9 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-zh.md +++ b/docs/src/pages/components/autocomplete/autocomplete-zh.md @@ -32,7 +32,9 @@ components: TextField, Popper, Autocomplete ## 自由独奏 -将 `freeSolo` 设置为true，以便在文本框中输入任意值。 +Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a search box with suggestions, e.g. Google search. + +However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus`. {{"demo": "pages/components/autocomplete/FreeSolo.js"}} @@ -42,11 +44,11 @@ components: TextField, Popper, Autocomplete ## 已禁用的选项 -{{"demo": "pages/components/autocomplete/disabledOptions.js"}} +{{"demo": "pages/components/autocomplete/DisabledOptions.js"}} ## `使用自动完成` -作为一种高级定制方式，我们公开了一个 `useAutocomplete()` 钩子方法。 It accepts almost the same options as the Autocomplete component minus all the props related to the rendering of JSX. Autocomplete组件内部也是使用的此钩子方法。 +For advanced customization use cases, we expose a `useAutocomplete()` hook. It accepts almost the same options as the Autocomplete component minus all the props related to the rendering of JSX. The Autocomplete component uses this hook internally. ```jsx import useAutocomplete from '@material-ui/lab/useAutocomplete'; @@ -58,13 +60,13 @@ import useAutocomplete from '@material-ui/lab/useAutocomplete'; ### 自定义钩子 -{{"demo": "pages/components/autocomplete/ustomizedHook.js"}} +{{"demo": "pages/components/autocomplete/CustomizedHook.js"}} -转到[自定义自动完成](#customized-autocomplete)部分，查看使用 `Autocomplete` 组件（而不是钩子）的例子。 +Head to the [Customized Autocomplete](#customized-autocomplete) section for a customization example with the `Autocomplete` component instead of the hook. ## 异步请求 -{{"demo": "pages/components/autocomplete/disabledOptions.js"}} +{{"demo": "pages/components/autocomplete/Asynchronous.js"}} ### Google Maps place @@ -76,13 +78,13 @@ For this demo, we need to load the [Google Maps JavaScript](https://developers.g > ⚠️ Before you can start using the Google Maps JavaScript API, you must sign up and create a billing account. -## Multiple values +## Multiple values（多重值） -Also known as tags, the user is allowed to enter more than one value. +这也称为标签，允许用户输入多个值。 {{"demo": "pages/components/autocomplete/Tags.js"}} -### Fixed options +### 固定选项 In the event that you need to lock certain tag so that they can't be removed in the interface, you can set the chips disabled. @@ -100,7 +102,7 @@ Fancy smaller inputs? Use the `size` prop. ## 定制的自动完成组件 -This demo reproduces the GitHub's label picker: +该演示再现了GitHub的标签选择器： {{"demo": "pages/components/autocomplete/GitHubLabel.js"}} @@ -163,10 +165,33 @@ Search within 10,000 randomly generated options. The list is virtualized thanks ## 局限性 +### autocomplete/autofill + +The browsers have heuristics to help the users fill the form inputs. However, it can harm the UX of the component. + +By default, the component disable the **autocomplete** feature (remembering what the user has typed for a given field in a previous session) with the `autoComplete="off"` attribute. + +However, in addition to remembering past entered values, the browser might also propose **autofill** suggestions (saved login, address, or payment details). In the event you want the avoid autofill, you can try the following: + +- Name the input without leaking any information the browser can use. e.g. `id="field1"` instead of `id="country"`. If you leave the id empty, the component uses a random id. +- Set `autoComplete="new-password"`: + jsx + + ### iOS VoiceOver VoiceOver on iOS Safari doesn't support the `aria-owns` attribute very well. You can work around the issue with the `disablePortal` prop. +### TypeScript + +To fully take advantage of type inference, you need to set the `multiple` prop to `undefined`, `false` or `true`. See [this discussion](https://github.com/mui-org/material-ui/pull/18854#discussion_r364215153) for more details. TypeScript might solve this bug in the future. + ## 可访问性 (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) diff --git a/docs/src/pages/components/avatars/avatars-de.md b/docs/src/pages/components/avatars/avatars-de.md index 7ac779b71c0dab..5b6f5edf9ed236 100644 --- a/docs/src/pages/components/avatars/avatars-de.md +++ b/docs/src/pages/components/avatars/avatars-de.md @@ -9,7 +9,7 @@ components: Avatar, AvatarGroup, Badge ## Bild Avatare -Image avatars can be created by passing standard `img` props `src` or `srcSet` to the component. +Bild-Avatare können erstellt werden, indem reguläre `img` props `src` oder `srcSet` an die Komponente übergeben werden. {{"demo": "pages/components/avatars/ImageAvatars.js"}} @@ -43,7 +43,7 @@ If there is an error loading the avatar image, the component falls back to an al - the provided children - the first letter of tha `alt` text -- a generic avatar icon +- ein generisches Avatar-Symbol {{"demo": "pages/components/avatars/FallbackAvatars.js"}} diff --git a/docs/src/pages/components/backdrop/backdrop-es.md b/docs/src/pages/components/backdrop/backdrop-es.md index cd56bf3c6ecc11..3df98f4b3fa941 100644 --- a/docs/src/pages/components/backdrop/backdrop-es.md +++ b/docs/src/pages/components/backdrop/backdrop-es.md @@ -1,12 +1,12 @@ --- -title: Overlay React component +title: Overlay Componente de React components: Backdrop --- # Backdrop -

The backdrop component is used to provide emphasis on a particular element or parts of it.

+

El componente backdrop es usado para proveer énfasis en un elemento particular o en partes de este.

-The overlay signals to the user of a state change within the application and can be used for creating loaders, dialogs and more. In its simplest form, the backdrop component will add a dimmed layer over your application. +Las señales de superposición de un cambio de estado dentro de la aplicación y puede ser usado para crear cargadores, diálogos y más. En su forma simple, el componente backdrop añade una capa de atenuado sobre su aplicación. {{"demo": "pages/components/backdrop/SimpleBackdrop.js"}} diff --git a/docs/src/pages/components/backdrop/backdrop-ru.md b/docs/src/pages/components/backdrop/backdrop-ru.md index cd56bf3c6ecc11..cd5748138d39cc 100644 --- a/docs/src/pages/components/backdrop/backdrop-ru.md +++ b/docs/src/pages/components/backdrop/backdrop-ru.md @@ -1,12 +1,12 @@ --- -title: Overlay React component -components: Backdrop +title: 'Затемнение: компонент React' +components: Затемнение --- -# Backdrop +# Затемнение -

The backdrop component is used to provide emphasis on a particular element or parts of it.

+

Затемнение предназначено для акцентирования внимания пользователя на определенном элементе интерфейса.

-The overlay signals to the user of a state change within the application and can be used for creating loaders, dialogs and more. In its simplest form, the backdrop component will add a dimmed layer over your application. +Затемнение обозначает изменение состояния приложения и может быть использовано для создания диалогов, экранов загрузки и т.д. Проще говоря, затемнение добавляет затемнённый слой поверх вашего приложения. {{"demo": "pages/components/backdrop/SimpleBackdrop.js"}} diff --git a/docs/src/pages/components/backdrop/backdrop-zh.md b/docs/src/pages/components/backdrop/backdrop-zh.md index b5428df360616b..2d5c6e20ea908d 100644 --- a/docs/src/pages/components/backdrop/backdrop-zh.md +++ b/docs/src/pages/components/backdrop/backdrop-zh.md @@ -1,9 +1,9 @@ --- -title: Overlay React component -components: Backdrop +title: 覆盖 React 组件 +components: 背景板（Backdrop） --- -# Backdrop +# 背景板（Backdrop）

Backdrop 组件用于提供对特定元素或其部分的强调。

diff --git a/docs/src/pages/components/badges/badges-de.md b/docs/src/pages/components/badges/badges-de.md index 39d73dfcda0579..9fd3a2c743a20a 100644 --- a/docs/src/pages/components/badges/badges-de.md +++ b/docs/src/pages/components/badges/badges-de.md @@ -29,7 +29,7 @@ The badge auto hides with badgeContent is zero. You can override this with the ` {{"demo": "pages/components/badges/ShowZeroBadge.js"}} -## Maximum value +## Maximaler Wert You can use the `max` property to cap the value of the badge content. diff --git a/docs/src/pages/components/badges/badges-es.md b/docs/src/pages/components/badges/badges-es.md index b1682dc66efe68..228d4dde4ad673 100644 --- a/docs/src/pages/components/badges/badges-es.md +++ b/docs/src/pages/components/badges/badges-es.md @@ -7,7 +7,7 @@ components: Badge

El componente Badge genera un pequeño badge en la esquina superior derecha de su(s) hijo(s).

-## Basic badges +## Badges básicos Ejemplos de insignias que contienen texto, utilizando colores primarios y secundarios. La insignia se aplica a sus hijos. @@ -19,36 +19,36 @@ Here is an example of customizing the component. You can learn more about this i {{"demo": "pages/demos/badges/CustomizedBadge.js"}} -## Visibilidad de la placa +## Visibilidad del Badge La visibilidad del badge puede ser controlada usando la propiedad `invisible`. {{"demo": "pages/components/badges/BadgeVisibility.js"}} -The badge auto hides with badgeContent is zero. You can override this with the `showZero` property. +El badge automáticamente se oculta con `badgeContent` igual a cero. Usted puede sobrescribir esto con la propiedad `showZero`. {{"demo": "pages/components/badges/ShowZeroBadge.js"}} -## Maximum value +## Valor máximo -You can use the `max` property to cap the value of the badge content. +Usted puede usar la propiedad `max` para establecer el valor máximo que puede contener el Badge. {{"demo": "pages/components/badges/BadgeMax.js"}} -## Dot badge +## Badge de punto -The `dot` property changes a badge into a small dot. This can be used as a notification that something has changed without giving a count. +La propiedad `dot` cambia el badge a un pequeño punto. Esto puede ser usado para mostrar una notificación sin mostrar el valor. {{"demo": "pages/components/badges/DotBadge.js"}} -## Superposición de insignia +## Superposición del Badge -You can use the `overlap` property to place the badge relative to the corner of the wrapped element. +Usted puede usar la propiedad `overlap` para establecer el Badge relativo a la esquina del elemento envuelto. {{"demo": "pages/components/badges/BadgeOverlap.js"}} -## Alineación de la insignia +## Alineación del Badge -You can use the `anchorOrigin` prop to move the badge to any corner of the wrapped element. +Usted puede usar la propiedad `anchorOrigin` para mover el Badge a cualquier esquina del elemento envuelto. {{"demo": "pages/components/badges/BadgeAlignment.js", "hideHeader": true}} \ No newline at end of file diff --git a/docs/src/pages/components/badges/badges-ru.md b/docs/src/pages/components/badges/badges-ru.md index 86555dbab3d7a1..a267bf50dd3589 100644 --- a/docs/src/pages/components/badges/badges-ru.md +++ b/docs/src/pages/components/badges/badges-ru.md @@ -7,7 +7,7 @@ components: Badge

Значок генерирует маленький значок в правом верхнем углу своего дочернего(их) элемента(ов).

-## Basic badges +## Простые значки Примеры значков, содержащих текст, с использованием первичных и вторичных цветов. Знак применяется к своим детям. @@ -25,30 +25,30 @@ components: Badge {{"demo": "pages/components/badges/BadgeVisibility.js"}} -The badge auto hides with badgeContent is zero. You can override this with the `showZero` property. +Значок автоматически скрывается, когда свойство badgeContent равно нулю. Вы можете переопределить это с помощью пропа `showZero`. {{"demo": "pages/components/badges/ShowZeroBadge.js"}} -## Maximum value +## Максимальное значение -You can use the `max` property to cap the value of the badge content. +Вы можете использовать проп `max`, чтобы ограничить значение значка. {{"demo": "pages/components/badges/BadgeMax.js"}} -## Dot badge +## Значок-точка -The `dot` property changes a badge into a small dot. This can be used as a notification that something has changed without giving a count. +Проп `dot` превращает значок в маленькую точку. Это можно использовать как уведомление о том, что что-то изменилось без количества. {{"demo": "pages/components/badges/DotBadge.js"}} -## Badge overlap +## Наложение значка -You can use the `overlap` property to place the badge relative to the corner of the wrapped element. +Вы можете использовать проп `overlap` для размещения значка относительно краев элемента. {{"demo": "pages/components/badges/BadgeOverlap.js"}} ## Выравнивание значка -You can use the `anchorOrigin` prop to move the badge to any corner of the wrapped element. +Вы можете использовать проп `anchorOrigin` для перемещения значка в любой угол элемента. {{"demo": "pages/components/badges/BadgeAlignment.js", "hideHeader": true}} \ No newline at end of file diff --git a/docs/src/pages/components/box/box-es.md b/docs/src/pages/components/box/box-es.md index df66df1647272f..f52bf3a5a8a5a9 100644 --- a/docs/src/pages/components/box/box-es.md +++ b/docs/src/pages/components/box/box-es.md @@ -6,7 +6,7 @@ title: Box React component

El componente Box sirve como una envoltura para la mayoría de las necesidades CSS.

-El componente Box empaqua [todas las funciones de estilo](/system/basics/#all-inclusive) que están expuesta en `@material-ui/system`. It's created using the [`styled()`](/styles/api/#styled-style-function-component) function of `@material-ui/core/styles`. +El componente Box empaqua [todas las funciones de estilo](/system/basics/#all-inclusive) que están expuesta en `@material-ui/system`. Es creado usando la función [`styled()`](/styles/api/#styled-style-function-component) de `@material-ui/core/styles`. ## Ejemplo @@ -38,7 +38,7 @@ El componente Box tiene una propiedad `clone` para permitir el uso del método d 2. Use props de render -The Box children accepts a render props function. Puede extraer el `className`. +Los elementos hijo de Box aceptan una función props de render. Puede extraer el `className`. ```jsx diff --git a/docs/src/pages/components/breadcrumbs/breadcrumbs-zh.md b/docs/src/pages/components/breadcrumbs/breadcrumbs-zh.md index e345e875991144..8ac7f04e9278b7 100644 --- a/docs/src/pages/components/breadcrumbs/breadcrumbs-zh.md +++ b/docs/src/pages/components/breadcrumbs/breadcrumbs-zh.md @@ -11,9 +11,9 @@ components: Breadcrumbs, Link, Typography {{"demo": "pages/components/breadcrumbs/SimpleBreadcrumbs.js"}} -## Active last breadcrumb +## 最后活跃的面包屑 -Keep the last breadcrumb interactive. +保持最后一个面包屑的互动性 {{"demo": "pages/components/breadcrumbs/ActiveLastBreadcrumb.js"}} diff --git a/docs/src/pages/components/button-group/button-group-aa.md b/docs/src/pages/components/button-group/button-group-aa.md new file mode 100644 index 00000000000000..eeec033fc2d0f0 --- /dev/null +++ b/docs/src/pages/components/button-group/button-group-aa.md @@ -0,0 +1,26 @@ +--- +title: crwdns108145:0crwdne108145:0 +components: crwdns108147:0crwdne108147:0 +--- + +# crwdns108149:0crwdne108149:0 + +

crwdns108151:0crwdne108151:0

+ +## crwdns108153:0crwdne108153:0 + +crwdns108155:0crwdne108155:0 + +### crwdns108157:0crwdne108157:0 + +crwdns108159:0crwdne108159:0 + +### crwdns108161:0crwdne108161:0 + +crwdns108163:0crwdne108163:0 + +### crwdns108165:0crwdne108165:0 + +crwdns108167:0crwdne108167:0 crwdns108169:0crwdne108169:0 + +crwdns108171:0crwdne108171:0 diff --git a/docs/src/pages/components/button-group/button-group-de.md b/docs/src/pages/components/button-group/button-group-de.md new file mode 100644 index 00000000000000..54e6a0621eed78 --- /dev/null +++ b/docs/src/pages/components/button-group/button-group-de.md @@ -0,0 +1,26 @@ +--- +title: ButtonGroup React component +components: Button, ButtonGroup +--- + +# Button group + +

The ButtonGroup component can be used to group related buttons.

+ +## Basic button group + +{{"demo": "pages/components/button-group/BasicButtonGroup.js"}} + +### Group sizes and colors + +{{"demo": "pages/components/button-group/GroupSizesColors.js"}} + +### Gruppenorientierung + +{{"demo": "pages/components/button-group/GroupOrientation.js"}} + +### Split Button + +Eine ButtonGroup kann auch verwendet werden um einen geteilten Button zu erstellen. Ein Dropdown kann verwendet werden um die Button-Aktion zu ändern (wie im unteren Beispiel gezeigt) oder die Aktion direkt zu aktivieren. + +{{"demo": "pages/components/button-group/SplitButton.js"}} diff --git a/docs/src/pages/components/button-group/button-group-es.md b/docs/src/pages/components/button-group/button-group-es.md new file mode 100644 index 00000000000000..8803b89b1a27ff --- /dev/null +++ b/docs/src/pages/components/button-group/button-group-es.md @@ -0,0 +1,26 @@ +--- +title: ButtonGroup React component +components: Button, ButtonGroup +--- + +# Button group + +

The ButtonGroup component can be used to group related buttons.

+ +## Basic button group + +{{"demo": "pages/components/button-group/BasicButtonGroup.js"}} + +### Group sizes and colors + +{{"demo": "pages/components/button-group/GroupSizesColors.js"}} + +### Group orientation + +{{"demo": "pages/components/button-group/GroupOrientation.js"}} + +### Split Button + +ButtonGroup can also be used to create a split button. The dropdown can change the button action (as in this example), or be used to immediately trigger a related action. + +{{"demo": "pages/components/button-group/SplitButton.js"}} diff --git a/docs/src/pages/components/button-group/button-group-fr.md b/docs/src/pages/components/button-group/button-group-fr.md new file mode 100644 index 00000000000000..8803b89b1a27ff --- /dev/null +++ b/docs/src/pages/components/button-group/button-group-fr.md @@ -0,0 +1,26 @@ +--- +title: ButtonGroup React component +components: Button, ButtonGroup +--- + +# Button group + +

The ButtonGroup component can be used to group related buttons.

+ +## Basic button group + +{{"demo": "pages/components/button-group/BasicButtonGroup.js"}} + +### Group sizes and colors + +{{"demo": "pages/components/button-group/GroupSizesColors.js"}} + +### Group orientation + +{{"demo": "pages/components/button-group/GroupOrientation.js"}} + +### Split Button + +ButtonGroup can also be used to create a split button. The dropdown can change the button action (as in this example), or be used to immediately trigger a related action. + +{{"demo": "pages/components/button-group/SplitButton.js"}} diff --git a/docs/src/pages/components/button-group/button-group-ja.md b/docs/src/pages/components/button-group/button-group-ja.md new file mode 100644 index 00000000000000..50780504e60ad5 --- /dev/null +++ b/docs/src/pages/components/button-group/button-group-ja.md @@ -0,0 +1,26 @@ +--- +title: ButtonGroup React component +components: Button, ButtonGroup +--- + +# Button group + +

The ButtonGroup component can be used to group related buttons.

+ +## Basic button group + +{{"demo": "pages/components/button-group/BasicButtonGroup.js"}} + +### Group sizes and colors + +{{"demo": "pages/components/button-group/GroupSizesColors.js"}} + +### Group orientation + +{{"demo": "pages/components/button-group/GroupOrientation.js"}} + +### Split Button + +ButtonGroupは分割ボタンの作成にも使用できます。 この例のようにドロップダウンでボタンの動作を変更することも、関連する動作をすぐに起動するために使用することもできます。 + +{{"demo": "pages/components/button-group/SplitButton.js"}} diff --git a/docs/src/pages/components/button-group/button-group-pt.md b/docs/src/pages/components/button-group/button-group-pt.md new file mode 100644 index 00000000000000..a8a2ad167cf002 --- /dev/null +++ b/docs/src/pages/components/button-group/button-group-pt.md @@ -0,0 +1,26 @@ +--- +title: ButtonGroup React component +components: Button, ButtonGroup +--- + +# Button group + +

The ButtonGroup component can be used to group related buttons.

+ +## Basic button group + +{{"demo": "pages/components/button-group/BasicButtonGroup.js"}} + +### Group sizes and colors + +{{"demo": "pages/components/button-group/GroupSizesColors.js"}} + +### Group orientation + +{{"demo": "pages/components/button-group/GroupOrientation.js"}} + +### Botão Dividido + +O ButtonGroup também pode ser usado para criar um botão dividido. A lista suspensa pode alterar a ação do botão (como neste exemplo), ou ser usada para acionar imediatamente uma ação relacionada. + +{{"demo": "pages/components/button-group/SplitButton.js"}} diff --git a/docs/src/pages/components/button-group/button-group-ru.md b/docs/src/pages/components/button-group/button-group-ru.md new file mode 100644 index 00000000000000..8803b89b1a27ff --- /dev/null +++ b/docs/src/pages/components/button-group/button-group-ru.md @@ -0,0 +1,26 @@ +--- +title: ButtonGroup React component +components: Button, ButtonGroup +--- + +# Button group + +

The ButtonGroup component can be used to group related buttons.

+ +## Basic button group + +{{"demo": "pages/components/button-group/BasicButtonGroup.js"}} + +### Group sizes and colors + +{{"demo": "pages/components/button-group/GroupSizesColors.js"}} + +### Group orientation + +{{"demo": "pages/components/button-group/GroupOrientation.js"}} + +### Split Button + +ButtonGroup can also be used to create a split button. The dropdown can change the button action (as in this example), or be used to immediately trigger a related action. + +{{"demo": "pages/components/button-group/SplitButton.js"}} diff --git a/docs/src/pages/components/button-group/button-group-zh.md b/docs/src/pages/components/button-group/button-group-zh.md new file mode 100644 index 00000000000000..dacfc0718b85e7 --- /dev/null +++ b/docs/src/pages/components/button-group/button-group-zh.md @@ -0,0 +1,26 @@ +--- +title: ButtonGroup React component +components: Button, ButtonGroup +--- + +# Button group + +

The ButtonGroup component can be used to group related buttons.

+ +## Basic button group + +{{"demo": "pages/components/button-group/BasicButtonGroup.js"}} + +### Group sizes and colors + +{{"demo": "pages/components/button-group/GroupSizesColors.js"}} + +### Group orientation + +{{"demo": "pages/components/button-group/GroupOrientation.js"}} + +### Split Button（分割按钮） + +ButtonGroup 也可用于创建分割按钮。 下拉列表可以用于更改按钮相关的操作（如本例所示），或者用于立即出发一个相关的操作。 + +{{"demo": "pages/components/button-group/SplitButton.js"}} diff --git a/docs/src/pages/components/buttons/buttons-aa.md b/docs/src/pages/components/buttons/buttons-aa.md index 87ac88fa147263..38551c7c61b3e3 100644 --- a/docs/src/pages/components/buttons/buttons-aa.md +++ b/docs/src/pages/components/buttons/buttons-aa.md @@ -1,6 +1,6 @@ --- title: crwdns89530:0crwdne89530:0 -components: crwdns89532:0crwdne89532:0 +components: crwdns108211:0crwdne108211:0 --- # crwdns106125:0crwdne106125:0 @@ -19,122 +19,82 @@ crwdns89538:0crwdne89538:0 crwdns89540:0crwdne89540:0 crwdns89554:0crwdne89554:0 crwdns89556:0crwdne89556:0 -crwdns89558:0crwdne89558:0 +crwdns108287:0crwdne108287:0 -crwdns89560:0crwdne89560:0 +crwdns108289:0crwdne108289:0 -crwdns106723:0crwdne106723:0 - -crwdns106725:0crwdne106725:0 +crwdns108291:0crwdne108291:0 ## crwdns89562:0crwdne89562:0 -crwdns106727:0crwdne106727:0 +crwdns108293:0crwdne108293:0 - crwdns89566:0crwdne89566:0 - crwdns89568:0crwdne89568:0 -crwdns106729:0crwdne106729:0 +crwdns108295:0crwdne108295:0 -crwdns106731:0crwdne106731:0 +crwdns108297:0crwdne108297:0 ## crwdns89574:0crwdne89574:0 -crwdns106733:0crwdne106733:0 crwdns106735:0crwdne106735:0 - -crwdns106737:0crwdne106737:0 - -crwdns106739:0crwdne106739:0 - -## crwdns89586:0crwdne89586:0 - -crwdns106741:0crwdne106741:0 - -crwdns106743:0crwdne106743:0 - -### crwdns106745:0crwdne106745:0 - -crwdns106747:0crwdne106747:0 - -### crwdns106749:0crwdne106749:0 - -crwdns106751:0crwdne106751:0 - -### crwdns106753:0crwdne106753:0 - -crwdns106755:0crwdne106755:0 crwdns106757:0crwdne106757:0 - -crwdns106759:0crwdne106759:0 - -## crwdns106761:0crwdne106761:0 - -crwdns106763:0crwdne106763:0 crwdns106765:0crwdne106765:0 crwdns106767:0crwdne106767:0 - -crwdns106769:0crwdne106769:0 - -crwdns106771:0crwdne106771:0 - -crwdns106773:0crwdne106773:0 - -crwdns106775:0crwdne106775:0 - -crwdns106777:0crwdne106777:0 +crwdns108299:0crwdne108299:0 crwdns108301:0crwdne108301:0 -crwdns106779:0crwdne106779:0 crwdns106781:0crwdne106781:0 +crwdns108303:0crwdne108303:0 -crwdns106783:0crwdne106783:0 +crwdns108305:0crwdne108305:0 -## crwdns106785:0crwdne106785:0 +## crwdns108213:0crwdne108213:0 -crwdns106787:0crwdne106787:0 +crwdns108307:0crwdne108307:0 -## crwdns106789:0crwdne106789:0 +## crwdns108217:0crwdne108217:0 -crwdns106791:0crwdne106791:0 crwdns106793:0crwdne106793:0 +crwdns108309:0crwdne108309:0 crwdns108311:0crwdne108311:0 -crwdns106795:0crwdne106795:0 +crwdns108313:0crwdne108313:0 -## crwdns106797:0crwdne106797:0 +## crwdns108225:0crwdne108225:0 -crwdns106799:0crwdne106799:0 crwdns106801:0crwdne106801:0 +crwdns108315:0crwdne108315:0 crwdns108317:0crwdne108317:0 -crwdns106803:0crwdne106803:0 +crwdns108319:0crwdne108319:0 -## crwdns106805:0crwdne106805:0 +## crwdns108233:0crwdne108233:0 -crwdns106807:0crwdne106807:0 +crwdns108321:0crwdne108321:0 -crwdns106809:0crwdne106809:0 +crwdns108323:0crwdne108323:0 -crwdns106811:0crwdne106811:0 +crwdns108325:0crwdne108325:0 -## crwdns106813:0crwdne106813:0 +## crwdns108241:0crwdne108241:0 -crwdns106815:0crwdne106815:0 crwdns106817:0crwdne106817:0 +crwdns108327:0crwdne108327:0 crwdns108329:0crwdne108329:0 -crwdns106819:0crwdne106819:0 +crwdns108331:0crwdne108331:0 -crwdns106821:0crwdne106821:0 +crwdns108333:0crwdne108333:0 -## crwdns106823:0crwdne106823:0 +## crwdns108251:0crwdne108251:0 -crwdns106825:0crwdne106825:0 crwdns106827:0crwdne106827:0 +crwdns108335:0crwdne108335:0 crwdns108337:0crwdne108337:0 -crwdns106829:0crwdne106829:0 +crwdns108339:0crwdne108339:0 -## crwdns106831:0crwdne106831:0 +## crwdns108259:0crwdne108259:0 -crwdns106833:0crwdne106833:0 crwdns106835:0crwdne106835:0 crwdns106837:0crwdne106837:0 crwdns106839:0crwdne106839:0 crwdns106841:0crwdne106841:0 +crwdns108341:0crwdne108341:0 crwdns108343:0crwdne108343:0 crwdns108345:0crwdne108345:0 crwdns108347:0crwdne108347:0 crwdns108349:0crwdne108349:0 -crwdns106843:0crwdne106843:0 +crwdns108351:0crwdne108351:0 -## crwdns106845:0crwdne106845:0 +## crwdns108273:0crwdne108273:0 -### crwdns106847:0crwdne106847:0 +### crwdns108275:0crwdne108275:0 -crwdns106849:0crwdne106849:0 +crwdns108353:0crwdne108353:0 -crwdns106851:0crwdne106851:0 +crwdns108355:0crwdne108355:0 1. crwdns103698:0crwdne103698:0 crwdns103700:0crwdne103700:0 @@ -142,7 +102,7 @@ crwdns106851:0crwdne106851:0 crwdns105395:0crwdne105395:0 ``` -crwdns106853:0crwdne106853:0 +crwdns108357:0crwdne108357:0 - crwdns103706:0crwdne103706:0 - crwdns103708:0crwdne103708:0 @@ -153,4 +113,4 @@ crwdns106853:0crwdne106853:0 crwdns105399:0{{ cursor: 'not-allowed' }}crwdnd105399:0{Link}crwdne105399:0 ``` -crwdns106855:0crwdne106855:0 \ No newline at end of file +crwdns108359:0crwdne108359:0 \ No newline at end of file diff --git a/docs/src/pages/components/buttons/buttons-de.md b/docs/src/pages/components/buttons/buttons-de.md index 6caeaae05d206d..ccb25bbf73a879 100644 --- a/docs/src/pages/components/buttons/buttons-de.md +++ b/docs/src/pages/components/buttons/buttons-de.md @@ -1,6 +1,6 @@ --- title: Button React Komponente -components: Button, ButtonGroup, Fab, IconButton, ButtonBase, Zoom +components: Button, IconButton, ButtonBase --- # Button (schaltfläche) @@ -19,8 +19,6 @@ components: Button, ButtonGroup, Fab, IconButton, ButtonBase, Zoom [Contained buttons](https://material.io/design/components/buttons.html#contained-button) sind hervorgehoben und unterscheiden sich durch die Verwendung von Höhe und Füllung. Sie enthalten Aktionen, die für Ihre App vorrangig sind. -Das letzte Beispiel dieser Demo zeigt, wie Sie eine Schaltfläche zum Hochladen verwenden. - {{"demo": "pages/components/buttons/ContainedButtons.js"}} You can remove the elevation with the `disableElevation` prop. @@ -29,114 +27,76 @@ You can remove the elevation with the `disableElevation` prop. ## Text Buttons -[Text buttons](https://material.io/design/components/buttons.html#text-button) werden normalerweise für weniger ausgeprägte Aktionen verwendet, darunter auch solche, die Folgendes enthalten: +[Text buttons](https://material.io/design/components/buttons.html#text-button) are typically used for less-pronounced actions, including those located: - In Dialogen - In Karten -In Karten helfen Text Buttons dabei, den Karteninhalt hervorzuheben. +In cards, text buttons help maintain an emphasis on card content. {{"demo": "pages/components/buttons/TextButtons.js"}} ## Outlined Buttons -[Outlined Buttons](https://material.io/design/components/buttons.html#outlined-button) sind Buttons mit mittlerer Betonung. Sie enthalten wichtige Aktionen, aber nicht die primäre Aktion in einer App. +[Outlined buttons](https://material.io/design/components/buttons.html#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app. -Outlined Buttons sind auch eine Alternative mit geringerer Betonung als Contained Buttons, oder eine Alternative mit höherer Betonung als Text Buttons. +Outlined buttons are also a lower emphasis alternative to contained buttons, or a higher emphasis alternative to text buttons. {{"demo": "pages/components/buttons/OutlinedButtons.js"}} -## Grouped Buttons - -The `ButtonGroup` component can be used to group buttons. - -{{"demo": "pages/components/buttons/GroupedButtons.js"}} - -### Group sizes and colors - -{{"demo": "pages/components/buttons/GroupSizesColors.js"}} - -### Gruppenorientierung - -{{"demo": "pages/components/buttons/GroupOrientation.js"}} - -### Split Button - -Eine ButtonGroup kann auch verwendet werden um einen geteilten Button zu erstellen. Ein Dropdown kann verwendet werden um die Button-Aktion zu ändern (wie im unteren Beispiel gezeigt) oder die Aktion direkt zu aktivieren. - -{{"demo": "pages/components/buttons/SplitButton.js"}} - -## Floating Action Buttons - -Ein [Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html) (FAB) führt die primäre oder gebräuchlichste Aktion auf einem Bildschirm aus. Es wird vor allen Bildschirminhalten angezeigt, normalerweise als Kreisform mit einem Symbol in der Mitte. Es gibt zwei Arten von FABs: normal und erweitert. - -Verwenden Sie eine FAB nur, wenn dies für die Darstellung der Hauptaktion eines Bildschirms am besten geeignet ist. - -Es wird nur eine Floating Action Button pro Bildschirm empfohlen, um die am häufigsten verwendete Aktion darzustellen. - -{{"demo": "pages/components/buttons/FloatingActionButtons.js"}} - -Der floating-action-button, wird standardmäßig als expandierendes Material auf dem Bildschirm animiert. - -Ein floating-action-button, der sich über mehrere seitliche Bildschirme (wie tabbed-screens) erstreckt, sollte kurz verschwinden und dann wieder erscheinen, wenn sich seine Aktion ändert. - -Hierzu kann der Zoom-Übergang verwendet werden. Da sowohl die vorhandenen als auch die eingegebenen Animationen gleichzeitig ausgelöst werden, verwenden wir `enterDelay`, um die Animation der ausgehenden Floating Action Buttons zu beenden, bevor die neue Animation eintritt. - -{{"demo": "pages/components/buttons/FloatingActionButtonZoom.js", "bg": true}} - -## Upload button +## Upload-Button {{"demo": "pages/components/buttons/UploadButtons.js"}} ## Größen -Fancy larger or smaller buttons? Use the `size` property. +Fancy larger or smaller buttons? Verwende die Eigenschaft `size`. {{"demo": "pages/components/buttons/ButtonSizes.js"}} -## Buttons mit Symbolen und Beschriftung +## Buttons with icons and label -Manchmal möchten Sie möglicherweise Symbole für bestimmte Schaltflächen, um die UX der Anwendung zu verbessern, da Logos leichter als einfacher Text erkannt werden. Wenn Sie beispielsweise eine Schaltfläche zum Löschen haben, können Sie sie mit einem Mülleimer-Symbol kennzeichnen. +Sometimes you might want to have icons for certain button to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon. {{"demo": "pages/components/buttons/IconLabelButtons.js"}} ## Icon Buttons -Icon Buttons finden Sie häufig in App-Bars und Toolbars. +Icon buttons are commonly found in app bars and toolbars. -Icons eignen sich auch für Umschaltflächen, mit denen eine einzelne Auswahl ausgewählt oder die Auswahl auf z. B. das Hinzufügen oder Entfernen eines Sterns zu einem Element. +Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item. {{"demo": "pages/components/buttons/IconButtons.js"}} -## Benutzerdefinierte Buttons +## Customized buttons Hier sind einige Beispiele, wie man die Komponente anpassen kann. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/components/). {{"demo": "pages/components/buttons/CustomizedButtons.js", "defaultCodeOpen": false}} -👑 Wenn Sie nach Inspiration suchen, sehen sie sich [MUI Treasury's Anpassungs-Beispiele](https://mui-treasury.com/components/button) an. +👑 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/components/button). -## Complex Buttons +## Komplexe Buttons -Die Text Buttons, die Contained Buttons, die Floatin Action Buttons und die Icon Buttons basieren auf derselben Komponente: der `ButtonBase`. Sie können die Vorteile dieser grundlegenden Komponente zum erstellen von benutzerdefinierten Interaktionen nutzen. +The Text Buttons, Contained Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the `ButtonBase`. Sie können diese Komponente der unteren Ebene nutzen, um benutzerdefinierte Interaktionen zu erstellen. -{{"demo": "pages/components/buttons/ButtonBases.js"}} +{{"demo": "pages/components/buttons/ButtonBase.js"}} ## Drittanbieter-Routing Bibliothek -Ein häufig gebrauchtes Feature ist das Wechseln zu einer anderen Seite als Button-Aktion. Die `ButtonBase` Komponente stellt eine Eigenschaft für diesen Anwendungsfall bereit: `component`. Für bestimmte Fokus-Polyfills erfordert `ButtonBase` jedoch den DOM-Knoten der bereitgestellten Komponente. Dies wird erreicht, indem der Komponente ein Ref zugeordnet wird und erwartet wird, dass die Komponente diesen Ref an den zugrunde liegenden DOM-Knoten weiterleitet. Given that many of the interactive components rely on `ButtonBase`, you should be able to take advantage of it everywhere. +Ein häufiger Anwendungsfall ist die Verwendung eines Buttons, um eine Navigation zu einer neuen Seite auszulösen. The `ButtonBase` component provides a property to handle this use case: `component`. However for certain focus polyfills `ButtonBase` requires the DOM node of the provided component. This is achieved by attaching a ref to the component and expecting that the component forwards this ref to the underlying DOM node. Given that many of the interactive components rely on `ButtonBase`, you should be able to take advantage of it everywhere. -Hier ist ein [Integrationsbeispiel mit react-router](/guides/composition/#button). +Here is an [integration example with react-router](/guides/composition/#button). ## Einschränkungen -### Cursor not-allowed +### Cursor nicht erlaubt The ButtonBase component sets `pointer-events: none;` on disabled buttons, which prevents the appearance of a disabled cursor. If you wish to use `not-allowed`, you have two options: -1. **CSS only**. You can remove the pointer events style on the disabled state of the ` - + + ); } ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/l5qv4y57vl) +### Controlling priority ⚠️ + +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; + + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` + +### Tiefere Elemente + +If you attempt to style a Drawer with variant permanent, you will likely need to affect the Drawer's child paper element. However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work. You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI. + +The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. + +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +**PlainCssButtonDeep.css** + +```css +.button { + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; +} +.button-label { + color: #fff; +} +``` + +**PlainCssButtonDeep.js** + +```jsx +import React from 'react'; +import Button from '@material-ui/core/Button'; -**Hinweis:** JSS fügt seine Styles am unteren Rand von `` ein. Wenn Sie Stilattribute nicht mit **!important** markieren möchten, ist das wichtig, dass Sie die [ CSS-Injektionsreihenfolge ](/styles/advanced/#css-injection-order) wie in der Demo ändern. +export default function PlainCssButtonDeep() { + return ( +
+ + +
+ ); +} +``` ## Globales CSS -Ist es zu viel Aufwand, die Klassennamen explizit für die Komponente bereitzustellen? [Sie können die von Material-UI generierten Klassennamen anvisieren](/styles/advanced/#with-material-ui-core). +Explicitly providing the class names to the component is too much effort? [You can target the class names generated by Material-UI](/styles/advanced/#with-material-ui-core). + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/global-css-bir9e) **GlobalCssButton.css** ```css .MuiButton-root { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.MuiButton-root:hover { + background-color: #5469d4; +} +.MuiButton-label { + color: #fff; } ``` @@ -75,17 +133,22 @@ import React from 'react'; import Button from '@material-ui/core/Button'; export default function GlobalCssButton() { - return ( -
- -
- ); + return ; } ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9yxopv4vmp) +### Controlling priority ⚠️ + +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; -**Hinweis:** JSS fügt seine Styles am unteren Rand von `` ein. Wenn Sie Stilattribute nicht mit **!important** markieren möchten, ist das wichtig, dass Sie die [ CSS-Injektionsreihenfolge ](/styles/advanced/#css-injection-order) wie in der Demo ändern. + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` ## Styled Components @@ -93,34 +156,87 @@ export default function GlobalCssButton() { The `styled()` method works perfectly on all of the components. -{{"demo": "pages/guides/interoperability/StyledComponents.js", "defaultCodeOpen": true}} +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-r1fsr) + +```jsx +import React from 'react'; +import styled from 'styled-components'; +import Button from '@material-ui/core/Button'; + +const StyledButton = styled(Button)` + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; + &:hover { + background-color: #5469d4; + } +`; + +export default function StyledComponents() { + return ( +
+ + Customized +
+ ); +} -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/k553lz1qrv) +``` -### Priorität kontrollieren +### Controlling priority ⚠️ -**Hinweis:** Sowohl styled-components als auch JSS fügen ihre Stile unten in `` ein. Um sicherzustellen, dass styled-components-Stile zuletzt geladen werden, ändern Sie die [CSS-Injektionsreihenfolge](/styles/advanced/#css-injection-order), wie in der Demo: +**Note:** Both styled-components and JSS inject their styles at the bottom of the ``. The best approach to ensuring styled-components styles are loaded last is to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: ```jsx import { StylesProvider } from '@material-ui/core/styles'; {/* Your component tree. - Mit Stil versehene Komponenten können die Stile von Material-UI überschreiben. */} + Now, you can override Material-UI's styles. */} ``` -Ein anderer Ansatz ist die Verwendung von `&&` Zeichen in Stilkomponenten, um, durch Wiederholen des Klassennamens, die [Spezifität zu erhöhen ](https://www.styled-components.com/docs/advanced#issues-with-specificity). Avoid the usage of `!important`. +Another approach is to use the `&&` characters in styled-components to [bump up specificity](https://www.styled-components.com/docs/advanced#issues-with-specificity) by repeating the class name. Avoid the usage of `!important`. ### Tiefere Elemente -Wenn Sie versuchen, einen Drawer mit der Variante permanent zu stylen, müssen Sie wahrscheinlich das untergeordnete Papierelement des Drawers beeinflussen. Das Paper ist jedoch nicht das Wurzelelement vom Drawer, sodass die Anpassung der gestalteten Komponenten wie oben daher nicht funktioniert. Sie müssen die [`classes`](/styles/advanced/#overriding-styles-classes-prop) API von Material-UI verwenden. +If you attempt to style a Drawer with variant permanent, you will likely need to affect the Drawer's child paper element. However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work. You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI. + +The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. It also works around [this styled-components issue](https://github.com/styled-components/styled-components/issues/439) by "consuming" properties that should not be passed on to the underlying component. + +{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js"}} + +```jsx +import React from 'react'; +import styled from 'styled-components'; +import Button from '@material-ui/core/Button'; -Im folgenden Beispiel wird der `label` Stil der `Button` Komponente zusätzlich zu den benutzerdefinierten Stilen auf dem Button selbst überschrieben. Es funktioniert auch um das [styled-components Problem](https://github.com/styled-components/styled-components/issues/439) durch "verbrauchen" der Eigenschaften, die nicht an die zugrunde liegende Komponente weitergegeben werden sollten, zu beheben. +const StyledButton = styled(Button)` + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; + &:hover { + background-color: #5469d4; + } + & .MuiButton-label { + color: #fff; + } +`; -{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "defaultCodeOpen": true}} +export default function StyledComponentsDeep() { + return ( +
+ + Customized +
+ ); +} +``` -Die obige Demo basiert auf den [standard `classes` Werten](/styles/advanced/#with-material-ui-core). Sie können jedoch Ihren eigenen Klassennamen angeben: `.label`. +The above demo relies on the [default `classes` values](/styles/advanced/#with-material-ui-core) but you can provide your own class name: `.label`. ```jsx import React from 'react'; @@ -130,39 +246,59 @@ import Button from '@material-ui/core/Button'; const StyledButton = styled(({ color, ...other }) => ( - Styled Components + + Customized ); } ``` -### ThemeProvider +### Theme -Material-UI hat eine reiche Themenstruktur, die Sie für Farbmanipulationen, Übergänge, die Medien - Anfragen und mehr nutzen können,. +Material-UI has a rich theme structure that you can leverage for the color manipulations, the transitions, the media queries, and more. + +We encourage to share the same theme object between Material-UI and your styles. + +```jsx +const StyledButton = styled(Button)` + ${({ theme }) => ` + background-color: ${theme.palette.primary.main}; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 4px 10px; + font-size: 13px; + &:hover { + background-color: ${darken(theme.palette.primary.main, 0.2)}; + } + ${theme.breakpoints.up('sm')} { + font-size: 14px; + padding: 7px 14px; + } + `} +`; +``` {{"demo": "pages/guides/interoperability/StyledComponentsTheme.js"}} -### Portale +### Portals -Das [Portal](/components/portal/) bietet eine erstklassige Möglichkeit, Kinder in einen DOM-Knoten zu rendern, der sich außerhalb der DOM-Hierarchie der übergeordneten Komponente befindet. Aufgrund der Art und Weise, in der styled-components das CSS erfasst, können Probleme auftreten, bei denen das Styling nicht angewendet wird. +The [Portal](/components/portal/) provides a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. Because of the way styled-components scopes its CSS, you may run into issues where styling is not applied. -Beispielsweise, wenn Sie versuchen, das [Menu](/components/menus/) einer [Select](/components/selects/) Komponente mit der Eigenschaft `MenuProps` zu stylen. Dafür müssen Sie die `className` Eigenschaft für das Element, das außerhalb der DOM-Hierarchie gerendert wird, mit übergeben. The following example shows a workaround: +For example, if you attempt to style the [Menu](/components/menus/) of a [Select](/components/selects/) component using the property `MenuProps`, you will need to pass along the `className` property to the element being rendered outside of it's DOM hierarchy. The following example shows a workaround: ```jsx import React from 'react'; @@ -189,19 +325,23 @@ const StyledMenu = styled(({ className, ...props }) => ( ![stars](https://img.shields.io/github/stars/css-modules/css-modules.svg?style=social&label=Star) -Es ist schwer zu wissen, welchen Marktanteil [diese Styling-Lösung](https://github.com/css-modules/css-modules) hat, da es von der Bündelungslösung, die die Leute verwenden abhängig ist. +It's hard to know the market share of [this styling solution](https://github.com/css-modules/css-modules) as it's dependent on the bundling solution people are using. + +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/css-modules-3j29h) **CssModulesButton.css** ```css .button { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; } ``` @@ -216,73 +356,149 @@ import Button from '@material-ui/core/Button'; export default function CssModulesButton() { return (
- - + +
); } ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/5km241l9xn) +### Controlling priority ⚠️ -**Hinweis:** JSS fügt seine Styles am unteren Rand von `` ein. Wenn Sie Stilattribute nicht mit **!important** markieren möchten, ist das wichtig, dass Sie die [ CSS-Injektionsreihenfolge ](/styles/advanced/#css-injection-order) wie in der Demo ändern. +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: -## Emotion +```jsx +import { StylesProvider } from '@material-ui/core/styles'; -![stars](https://img.shields.io/github/stars/emotion-js/emotion.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/emotion.svg?) + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` + +### Tiefere Elemente + +If you attempt to style a Drawer with variant permanent, you will likely need to affect the Drawer's child paper element. However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work. You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI. + +The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. -### Die `css` Eigenschaft +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} -Die Emotion **css()** Methode funktioniert nahtlos mit der Material-UI. +**CssModulesButtonDeep.css** -{{"demo": "pages/guides/interoperability/EmotionCSS.js", "defaultCodeOpen": true}} +```css +.root { + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.root:hover { + background-color: #5469d4; +} +.label { + color: #fff; +} +``` + +**CssModulesButtonDeep.js** + +```jsx +import React from 'react'; +// webpack, parcel or else will inject the CSS into the page +import styles from './CssModulesButtonDeep.css'; +import Button from '@material-ui/core/Button'; -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/yw93kl7y0j) +export default function CssModulesButtonDeep() { + return ( +
+ + +
+ ); +} +``` -**Hinweis:** JSS fügt seine Styles am unteren Rand von `` ein. Wenn Sie Stilattribute nicht mit **!important** markieren möchten, ist das wichtig, dass Sie die [ CSS-Injektionsreihenfolge ](/styles/advanced/#css-injection-order) wie in der Demo ändern. +## Emotion -### Die `styled()` API +![stars](https://img.shields.io/github/stars/emotion-js/emotion.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/emotion.svg?) -Es funktioniert genauso wie gestylte Komponenten. Sie können [dieselbe Anleitung verwenden](/guides/interoperability/#styled-components). +### The `css` prop -## React JSS +Emotion's **css()** method works seamlessly with Material-UI. -![stars](https://img.shields.io/github/stars/cssinjs/jss.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/react-jss.svg?) +{{"demo": "pages/guides/interoperability/EmotionCSS.js", "hideHeader": true}} -Die Styling-Lösung von Material-UI teilt viele Bausteine mit [react-jss](https://github.com/cssinjs/react-jss). A fork was needed in order to handle Material-UI's unique needs, but with the intent to merge the changes and fixes from Material-UI back to react-jss. +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/emotion-bgfxj) ```jsx -import React from 'react'; -import PropTypes from 'prop-types'; -import injectSheet from 'react-jss'; +/** @jsx jsx */ +import { jsx, css } from '@emotion/core'; import Button from '@material-ui/core/Button'; -const styles = { - button: { - background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', - borderRadius: 3, - border: 0, - color: 'white', - height: 48, - padding: '0 30px', - boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', - }, -}; - -function ReactJssButton(props) { +export default function EmotionCSS() { return (
- - + +
); } +``` + +### Controlling priority ⚠️ + +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; + + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` + +### Theme -ReactJssButton.propTypes = { - classes: PropTypes.object.isRequired, -}; +Material-UI has a rich theme structure that you can leverage for the color manipulations, the transitions, the media queries, and more. -export default injectSheet(styles)(ReactJssButton); +We encourage to share the same theme object between Material-UI and your styles. + +```jsx + ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/24kllqxvmp) \ No newline at end of file +{{"demo": "pages/guides/interoperability/EmotionTheme.js"}} + +### The `styled()` API + +It works exactly like styled components. You can [use the same guide](/guides/interoperability/#styled-components). \ No newline at end of file diff --git a/docs/src/pages/guides/interoperability/interoperability-es.md b/docs/src/pages/guides/interoperability/interoperability-es.md index 4f33149808e867..e52aff0b117b66 100644 --- a/docs/src/pages/guides/interoperability/interoperability-es.md +++ b/docs/src/pages/guides/interoperability/interoperability-es.md @@ -1,6 +1,6 @@ # Interoperabilidad de la biblioteca de estilos -

While it is simple to use the JSS based styling solution provided by Material-UI to style your application, it is possible to use any styling solution you prefer, from plain CSS to any number of CSS-in-JS libraries.

+

While you can use the JSS based styling solution provided by Material-UI to style your application, you can also use the one you already know and love (from plain CSS to styled-components).

This guide aims to document the most popular alternatives, but you should find that the principals applied here can be adapted to other libraries. There are examples for the following styling solutions: @@ -10,23 +10,26 @@ This guide aims to document the most popular alternatives, but you should find t - [CSS Modules](#css-modules) - [Emotion](#emotion) - [React JSS](#react-jss) -- [Glamor](#glamor) ## Plain CSS -Nothing fancy, plain old CSS. +Nothing fancy, just plain CSS. + +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/plain-css-mtzri) **PlainCssButton.css** ```css .button { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; } ``` @@ -39,32 +42,87 @@ import Button from '@material-ui/core/Button'; export default function PlainCssButton() { return (
- - + +
); } ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/l5qv4y57vl) +### Controlling priority ⚠️ + +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; + + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` + +### Deeper elements + +If you attempt to style a Drawer with variant permanent, you will likely need to affect the Drawer's child paper element. However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work. You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI. + +The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. + +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} -**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo. +**PlainCssButtonDeep.css** + +```css +.button { + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; +} +.button-label { + color: #fff; +} +``` + +**PlainCssButtonDeep.js** + +```jsx +import React from 'react'; +import Button from '@material-ui/core/Button'; + +export default function PlainCssButtonDeep() { + return ( +
+ + +
+ ); +} +``` ## Global CSS Explicitly providing the class names to the component is too much effort? [You can target the class names generated by Material-UI](/styles/advanced/#with-material-ui-core). +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/global-css-bir9e) + **GlobalCssButton.css** ```css .MuiButton-root { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.MuiButton-root:hover { + background-color: #5469d4; +} +.MuiButton-label { + color: #fff; } ``` @@ -75,17 +133,22 @@ import React from 'react'; import Button from '@material-ui/core/Button'; export default function GlobalCssButton() { - return ( -
- -
- ); + return ; } ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9yxopv4vmp) +### Controlling priority ⚠️ -**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo. +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; + + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` ## Styled Components @@ -93,11 +156,37 @@ export default function GlobalCssButton() { The `styled()` method works perfectly on all of the components. -{{"demo": "pages/guides/interoperability/StyledComponents.js", "defaultCodeOpen": true}} +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-r1fsr) + +```jsx +import React from 'react'; +import styled from 'styled-components'; +import Button from '@material-ui/core/Button'; + +const StyledButton = styled(Button)` + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; + &:hover { + background-color: #5469d4; + } +`; + +export default function StyledComponents() { + return ( +
+ + Customized +
+ ); +} -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/k553lz1qrv) +``` -### Controlling Priority +### Controlling priority ⚠️ **Note:** Both styled-components and JSS inject their styles at the bottom of the ``. The best approach to ensuring styled-components styles are loaded last is to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: @@ -106,7 +195,7 @@ import { StylesProvider } from '@material-ui/core/styles'; {/* Your component tree. - Styled components can override Material-UI's styles. */} + Now, you can override Material-UI's styles. */} ``` @@ -118,7 +207,34 @@ If you attempt to style a Drawer with variant permanent, you will likely need to The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. It also works around [this styled-components issue](https://github.com/styled-components/styled-components/issues/439) by "consuming" properties that should not be passed on to the underlying component. -{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "defaultCodeOpen": true}} +{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js"}} + +```jsx +import React from 'react'; +import styled from 'styled-components'; +import Button from '@material-ui/core/Button'; + +const StyledButton = styled(Button)` + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; + &:hover { + background-color: #5469d4; + } + & .MuiButton-label { + color: #fff; + } +`; + +export default function StyledComponentsDeep() { + return ( +
+ + Customized +
+ ); +} +``` The above demo relies on the [default `classes` values](/styles/advanced/#with-material-ui-core) but you can provide your own class name: `.label`. @@ -130,32 +246,52 @@ import Button from '@material-ui/core/Button'; const StyledButton = styled(({ color, ...other }) => ( - Styled Components + + Customized ); } ``` -### ThemeProvider +### Tema Material-UI has a rich theme structure that you can leverage for the color manipulations, the transitions, the media queries, and more. +We encourage to share the same theme object between Material-UI and your styles. + +```jsx +const StyledButton = styled(Button)` + ${({ theme }) => ` + background-color: ${theme.palette.primary.main}; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 4px 10px; + font-size: 13px; + &:hover { + background-color: ${darken(theme.palette.primary.main, 0.2)}; + } + ${theme.breakpoints.up('sm')} { + font-size: 14px; + padding: 7px 14px; + } + `} +`; +``` + {{"demo": "pages/guides/interoperability/StyledComponentsTheme.js"}} ### Portals @@ -191,17 +327,21 @@ const StyledMenu = styled(({ className, ...props }) => ( It's hard to know the market share of [this styling solution](https://github.com/css-modules/css-modules) as it's dependent on the bundling solution people are using. +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/css-modules-3j29h) + **CssModulesButton.css** ```css .button { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; } ``` @@ -216,73 +356,149 @@ import Button from '@material-ui/core/Button'; export default function CssModulesButton() { return (
- - + +
); } ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/5km241l9xn) +### Controlling priority ⚠️ -**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo. +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: -## Emotion +```jsx +import { StylesProvider } from '@material-ui/core/styles'; -![estrellas](https://img.shields.io/github/stars/emotion-js/emotion.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/emotion.svg?) + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` -### The `css` prop +### Deeper elements -Emotion's **css()** method works seamlessly with Material-UI. +If you attempt to style a Drawer with variant permanent, you will likely need to affect the Drawer's child paper element. However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work. You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI. -{{"demo": "pages/guides/interoperability/EmotionCSS.js", "defaultCodeOpen": true}} +The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/yw93kl7y0j) +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} -**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo. +**CssModulesButtonDeep.css** -### The `styled()` API +```css +.root { + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.root:hover { + background-color: #5469d4; +} +.label { + color: #fff; +} +``` -It works exactly like styled components. You can [use the same guide](/guides/interoperability/#styled-components). +**CssModulesButtonDeep.js** -## React JSS +```jsx +import React from 'react'; +// webpack, parcel or else will inject the CSS into the page +import styles from './CssModulesButtonDeep.css'; +import Button from '@material-ui/core/Button'; + +export default function CssModulesButtonDeep() { + return ( +
+ + +
+ ); +} +``` + +## Emotion + +![estrellas](https://img.shields.io/github/stars/emotion-js/emotion.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/emotion.svg?) + +### The `css` prop + +Emotion's **css()** method works seamlessly with Material-UI. -![estrellas](https://img.shields.io/github/stars/cssinjs/jss.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/react-jss.svg?) +{{"demo": "pages/guides/interoperability/EmotionCSS.js", "hideHeader": true}} -Material-UI's styling solution shares many building blocks with [react-jss](https://github.com/cssinjs/react-jss). A fork was needed in order to handle Material-UI's unique needs, but with the intent to merge the changes and fixes from Material-UI back to react-jss. +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/emotion-bgfxj) ```jsx -import React from 'react'; -import PropTypes from 'prop-types'; -import injectSheet from 'react-jss'; +/** @jsx jsx */ +import { jsx, css } from '@emotion/core'; import Button from '@material-ui/core/Button'; -const styles = { - button: { - background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', - borderRadius: 3, - border: 0, - color: 'white', - height: 48, - padding: '0 30px', - boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', - }, -}; - -function ReactJssButton(props) { +export default function EmotionCSS() { return (
- - + +
); } +``` + +### Controlling priority ⚠️ -ReactJssButton.propTypes = { - classes: PropTypes.object.isRequired, -}; +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; -export default injectSheet(styles)(ReactJssButton); + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/24kllqxvmp) \ No newline at end of file +### Tema + +Material-UI has a rich theme structure that you can leverage for the color manipulations, the transitions, the media queries, and more. + +We encourage to share the same theme object between Material-UI and your styles. + +```jsx + +``` + +{{"demo": "pages/guides/interoperability/EmotionTheme.js"}} + +### The `styled()` API + +It works exactly like styled components. You can [use the same guide](/guides/interoperability/#styled-components). \ No newline at end of file diff --git a/docs/src/pages/guides/interoperability/interoperability-fr.md b/docs/src/pages/guides/interoperability/interoperability-fr.md index a8d85201b68fd1..ed799d04b9e84f 100644 --- a/docs/src/pages/guides/interoperability/interoperability-fr.md +++ b/docs/src/pages/guides/interoperability/interoperability-fr.md @@ -1,6 +1,6 @@ # Interopérabilité de la bibliothèque de styles -

While it is simple to use the JSS based styling solution provided by Material-UI to style your application, it is possible to use any styling solution you prefer, from plain CSS to any number of CSS-in-JS libraries.

+

While you can use the JSS based styling solution provided by Material-UI to style your application, you can also use the one you already know and love (from plain CSS to styled-components).

This guide aims to document the most popular alternatives, but you should find that the principals applied here can be adapted to other libraries. There are examples for the following styling solutions: @@ -10,23 +10,26 @@ This guide aims to document the most popular alternatives, but you should find t - [CSS Modules](#css-modules) - [Emotion](#emotion) - [React JSS](#react-jss) -- [Glamor](#glamor) ## Plain CSS -Nothing fancy, plain old CSS. +Nothing fancy, just plain CSS. + +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/plain-css-mtzri) **PlainCssButton.css** ```css .button { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; } ``` @@ -39,32 +42,87 @@ import Button from '@material-ui/core/Button'; export default function PlainCssButton() { return (
- - + +
); } ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/l5qv4y57vl) +### Controlling priority ⚠️ + +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; + + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` + +### Deeper elements + +If you attempt to style a Drawer with variant permanent, you will likely need to affect the Drawer's child paper element. However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work. You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI. + +The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. + +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} -**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo. +**PlainCssButtonDeep.css** + +```css +.button { + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; +} +.button-label { + color: #fff; +} +``` + +**PlainCssButtonDeep.js** + +```jsx +import React from 'react'; +import Button from '@material-ui/core/Button'; + +export default function PlainCssButtonDeep() { + return ( +
+ + +
+ ); +} +``` ## CSS global Explicitly providing the class names to the component is too much effort? [You can target the class names generated by Material-UI](/styles/advanced/#with-material-ui-core). +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/global-css-bir9e) + **GlobalCssButton.css** ```css .MuiButton-root { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.MuiButton-root:hover { + background-color: #5469d4; +} +.MuiButton-label { + color: #fff; } ``` @@ -75,17 +133,22 @@ import React from 'react'; import Button from '@material-ui/core/Button'; export default function GlobalCssButton() { - return ( -
- -
- ); + return ; } ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9yxopv4vmp) +### Controlling priority ⚠️ -**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo. +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; + + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` ## Styled Components @@ -93,11 +156,37 @@ export default function GlobalCssButton() { The `styled()` method works perfectly on all of the components. -{{"demo": "pages/guides/interoperability/StyledComponents.js", "defaultCodeOpen": true}} +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-r1fsr) + +```jsx +import React from 'react'; +import styled from 'styled-components'; +import Button from '@material-ui/core/Button'; + +const StyledButton = styled(Button)` + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; + &:hover { + background-color: #5469d4; + } +`; + +export default function StyledComponents() { + return ( +
+ + Customized +
+ ); +} -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/k553lz1qrv) +``` -### Controlling Priority +### Controlling priority ⚠️ **Note:** Both styled-components and JSS inject their styles at the bottom of the ``. The best approach to ensuring styled-components styles are loaded last is to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: @@ -106,7 +195,7 @@ import { StylesProvider } from '@material-ui/core/styles'; {/* Your component tree. - Styled components can override Material-UI's styles. */} + Now, you can override Material-UI's styles. */} ``` @@ -118,7 +207,34 @@ If you attempt to style a Drawer with variant permanent, you will likely need to The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. It also works around [this styled-components issue](https://github.com/styled-components/styled-components/issues/439) by "consuming" properties that should not be passed on to the underlying component. -{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "defaultCodeOpen": true}} +{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js"}} + +```jsx +import React from 'react'; +import styled from 'styled-components'; +import Button from '@material-ui/core/Button'; + +const StyledButton = styled(Button)` + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; + &:hover { + background-color: #5469d4; + } + & .MuiButton-label { + color: #fff; + } +`; + +export default function StyledComponentsDeep() { + return ( +
+ + Customized +
+ ); +} +``` The above demo relies on the [default `classes` values](/styles/advanced/#with-material-ui-core) but you can provide your own class name: `.label`. @@ -130,32 +246,52 @@ import Button from '@material-ui/core/Button'; const StyledButton = styled(({ color, ...other }) => ( - Styled Components + + Customized ); } ``` -### ThemeProvider +### Thème Material-UI has a rich theme structure that you can leverage for the color manipulations, the transitions, the media queries, and more. +We encourage to share the same theme object between Material-UI and your styles. + +```jsx +const StyledButton = styled(Button)` + ${({ theme }) => ` + background-color: ${theme.palette.primary.main}; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 4px 10px; + font-size: 13px; + &:hover { + background-color: ${darken(theme.palette.primary.main, 0.2)}; + } + ${theme.breakpoints.up('sm')} { + font-size: 14px; + padding: 7px 14px; + } + `} +`; +``` + {{"demo": "pages/guides/interoperability/StyledComponentsTheme.js"}} ### Portals @@ -191,17 +327,21 @@ const StyledMenu = styled(({ className, ...props }) => ( It's hard to know the market share of [this styling solution](https://github.com/css-modules/css-modules) as it's dependent on the bundling solution people are using. +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/css-modules-3j29h) + **CssModulesButton.css** ```css .button { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; } ``` @@ -216,73 +356,149 @@ import Button from '@material-ui/core/Button'; export default function CssModulesButton() { return (
- - + +
); } ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/5km241l9xn) +### Controlling priority ⚠️ -**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo. +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: -## Emotion +```jsx +import { StylesProvider } from '@material-ui/core/styles'; -![stars](https://img.shields.io/github/stars/emotion-js/emotion.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/emotion.svg?) + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` -### The `css` prop +### Deeper elements -Emotion's **css()** method works seamlessly with Material-UI. +If you attempt to style a Drawer with variant permanent, you will likely need to affect the Drawer's child paper element. However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work. You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI. -{{"demo": "pages/guides/interoperability/EmotionCSS.js", "defaultCodeOpen": true}} +The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/yw93kl7y0j) +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} -**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo. +**CssModulesButtonDeep.css** -### The `styled()` API +```css +.root { + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.root:hover { + background-color: #5469d4; +} +.label { + color: #fff; +} +``` -It works exactly like styled components. You can [use the same guide](/guides/interoperability/#styled-components). +**CssModulesButtonDeep.js** -## React JSS +```jsx +import React from 'react'; +// webpack, parcel or else will inject the CSS into the page +import styles from './CssModulesButtonDeep.css'; +import Button from '@material-ui/core/Button'; + +export default function CssModulesButtonDeep() { + return ( +
+ + +
+ ); +} +``` + +## Emotion + +![stars](https://img.shields.io/github/stars/emotion-js/emotion.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/emotion.svg?) + +### The `css` prop + +Emotion's **css()** method works seamlessly with Material-UI. -![stars](https://img.shields.io/github/stars/cssinjs/jss.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/react-jss.svg?) +{{"demo": "pages/guides/interoperability/EmotionCSS.js", "hideHeader": true}} -Material-UI's styling solution shares many building blocks with [react-jss](https://github.com/cssinjs/react-jss). A fork was needed in order to handle Material-UI's unique needs, but with the intent to merge the changes and fixes from Material-UI back to react-jss. +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/emotion-bgfxj) ```jsx -import React from 'react'; -import PropTypes from 'prop-types'; -import injectSheet from 'react-jss'; +/** @jsx jsx */ +import { jsx, css } from '@emotion/core'; import Button from '@material-ui/core/Button'; -const styles = { - button: { - background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', - borderRadius: 3, - border: 0, - color: 'white', - height: 48, - padding: '0 30px', - boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', - }, -}; - -function ReactJssButton(props) { +export default function EmotionCSS() { return (
- - + +
); } +``` + +### Controlling priority ⚠️ -ReactJssButton.propTypes = { - classes: PropTypes.object.isRequired, -}; +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; -export default injectSheet(styles)(ReactJssButton); + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/24kllqxvmp) \ No newline at end of file +### Thème + +Material-UI has a rich theme structure that you can leverage for the color manipulations, the transitions, the media queries, and more. + +We encourage to share the same theme object between Material-UI and your styles. + +```jsx + +``` + +{{"demo": "pages/guides/interoperability/EmotionTheme.js"}} + +### The `styled()` API + +It works exactly like styled components. You can [use the same guide](/guides/interoperability/#styled-components). \ No newline at end of file diff --git a/docs/src/pages/guides/interoperability/interoperability-ja.md b/docs/src/pages/guides/interoperability/interoperability-ja.md index 682401e3b80cc2..b688407f444679 100644 --- a/docs/src/pages/guides/interoperability/interoperability-ja.md +++ b/docs/src/pages/guides/interoperability/interoperability-ja.md @@ -1,6 +1,6 @@ # スタイルライブラリの相互運用性 -

While it is simple to use the JSS based styling solution provided by Material-UI to style your application, it is possible to use any styling solution you prefer, from plain CSS to any number of CSS-in-JS libraries.

+

While you can use the JSS based styling solution provided by Material-UI to style your application, you can also use the one you already know and love (from plain CSS to styled-components).

This guide aims to document the most popular alternatives, but you should find that the principals applied here can be adapted to other libraries. There are examples for the following styling solutions: @@ -10,23 +10,26 @@ This guide aims to document the most popular alternatives, but you should find t - [CSS Modules](#css-modules) - [Emotion](#emotion) - [React JSS](#react-jss) -- [Glamor](#glamor) ## Plain CSS -Nothing fancy, plain old CSS. +Nothing fancy, just plain CSS. + +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/plain-css-mtzri) **PlainCssButton.css** ```css .button { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; } ``` @@ -39,32 +42,87 @@ import Button from '@material-ui/core/Button'; export default function PlainCssButton() { return (
- - + +
); } ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/l5qv4y57vl) +### Controlling priority ⚠️ + +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; + + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` + +### Deeper elements + +If you attempt to style a Drawer with variant permanent, you will likely need to affect the Drawer's child paper element. However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work. You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI. + +The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. + +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} -**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo. +**PlainCssButtonDeep.css** + +```css +.button { + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; +} +.button-label { + color: #fff; +} +``` + +**PlainCssButtonDeep.js** + +```jsx +import React from 'react'; +import Button from '@material-ui/core/Button'; + +export default function PlainCssButtonDeep() { + return ( +
+ + +
+ ); +} +``` ## Global CSS Explicitly providing the class names to the component is too much effort? [You can target the class names generated by Material-UI](/styles/advanced/#with-material-ui-core). +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/global-css-bir9e) + **GlobalCssButton.css** ```css .MuiButton-root { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.MuiButton-root:hover { + background-color: #5469d4; +} +.MuiButton-label { + color: #fff; } ``` @@ -75,20 +133,22 @@ import React from 'react'; import Button from '@material-ui/core/Button'; export default function GlobalCssButton() { - return ( -
- -
- ); + return ; } - -Text -XPath: /pre[4]/code ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9yxopv4vmp) +### Controlling priority ⚠️ -**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo. +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; + + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` ## Styled Components @@ -96,11 +156,37 @@ XPath: /pre[4]/code The `styled()` method works perfectly on all of the components. -{{"demo": "pages/guides/interoperability/StyledComponents.js", "defaultCodeOpen": true}} +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-r1fsr) + +```jsx +import React from 'react'; +import styled from 'styled-components'; +import Button from '@material-ui/core/Button'; + +const StyledButton = styled(Button)` + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; + &:hover { + background-color: #5469d4; + } +`; + +export default function StyledComponents() { + return ( +
+ + Customized +
+ ); +} -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/k553lz1qrv) +``` -### Controlling Priority +### Controlling priority ⚠️ **Note:** Both styled-components and JSS inject their styles at the bottom of the ``. The best approach to ensuring styled-components styles are loaded last is to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: @@ -109,7 +195,7 @@ import { StylesProvider } from '@material-ui/core/styles'; {/* Your component tree. - Styled components can override Material-UI's styles. */} + Now, you can override Material-UI's styles. */} ``` @@ -121,7 +207,34 @@ If you attempt to style a Drawer with variant permanent, you will likely need to The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. It also works around [this styled-components issue](https://github.com/styled-components/styled-components/issues/439) by "consuming" properties that should not be passed on to the underlying component. -{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "defaultCodeOpen": true}} +{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js"}} + +```jsx +import React from 'react'; +import styled from 'styled-components'; +import Button from '@material-ui/core/Button'; + +const StyledButton = styled(Button)` + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; + &:hover { + background-color: #5469d4; + } + & .MuiButton-label { + color: #fff; + } +`; + +export default function StyledComponentsDeep() { + return ( +
+ + Customized +
+ ); +} +``` The above demo relies on the [default `classes` values](/styles/advanced/#with-material-ui-core) but you can provide your own class name: `.label`. @@ -133,32 +246,52 @@ import Button from '@material-ui/core/Button'; const StyledButton = styled(({ color, ...other }) => ( - Styled Components + + Customized ); } ``` -### ThemeProvider +### テーマ Material-UI has a rich theme structure that you can leverage for the color manipulations, the transitions, the media queries, and more. +We encourage to share the same theme object between Material-UI and your styles. + +```jsx +const StyledButton = styled(Button)` + ${({ theme }) => ` + background-color: ${theme.palette.primary.main}; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 4px 10px; + font-size: 13px; + &:hover { + background-color: ${darken(theme.palette.primary.main, 0.2)}; + } + ${theme.breakpoints.up('sm')} { + font-size: 14px; + padding: 7px 14px; + } + `} +`; +``` + {{"demo": "pages/guides/interoperability/StyledComponentsTheme.js"}} ### Portals @@ -194,17 +327,21 @@ const StyledMenu = styled(({ className, ...props }) => ( It's hard to know the market share of [this styling solution](https://github.com/css-modules/css-modules) as it's dependent on the bundling solution people are using. +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/css-modules-3j29h) + **CssModulesButton.css** ```css .button { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; } ``` @@ -219,73 +356,149 @@ import Button from '@material-ui/core/Button'; export default function CssModulesButton() { return (
- - + +
); } ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/5km241l9xn) +### Controlling priority ⚠️ -**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo. +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: -## Emotion +```jsx +import { StylesProvider } from '@material-ui/core/styles'; -![Stars](https://img.shields.io/github/stars/emotion-js/emotion.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/emotion.svg?) + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` -### The `css` prop +### Deeper elements -Emotion's **css()** method works seamlessly with Material-UI. +If you attempt to style a Drawer with variant permanent, you will likely need to affect the Drawer's child paper element. However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work. You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI. -{{"demo": "pages/guides/interoperability/EmotionCSS.js", "defaultCodeOpen": true}} +The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/yw93kl7y0j) +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} -**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo. +**CssModulesButtonDeep.css** -### The `styled()` API +```css +.root { + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.root:hover { + background-color: #5469d4; +} +.label { + color: #fff; +} +``` -It works exactly like styled components. You can [use the same guide](/guides/interoperability/#styled-components). +**CssModulesButtonDeep.js** -## React JSS +```jsx +import React from 'react'; +// webpack, parcel or else will inject the CSS into the page +import styles from './CssModulesButtonDeep.css'; +import Button from '@material-ui/core/Button'; + +export default function CssModulesButtonDeep() { + return ( +
+ + +
+ ); +} +``` + +## Emotion + +![Stars](https://img.shields.io/github/stars/emotion-js/emotion.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/emotion.svg?) + +### The `css` prop + +Emotion's **css()** method works seamlessly with Material-UI. -![Stars](https://img.shields.io/github/stars/cssinjs/jss.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/react-jss.svg?) +{{"demo": "pages/guides/interoperability/EmotionCSS.js", "hideHeader": true}} -Material-UI's styling solution shares many building blocks with [react-jss](https://github.com/cssinjs/react-jss). A fork was needed in order to handle Material-UI's unique needs, but with the intent to merge the changes and fixes from Material-UI back to react-jss. +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/emotion-bgfxj) ```jsx -import React from 'react'; -import PropTypes from 'prop-types'; -import injectSheet from 'react-jss'; +/** @jsx jsx */ +import { jsx, css } from '@emotion/core'; import Button from '@material-ui/core/Button'; -const styles = { - button: { - background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', - borderRadius: 3, - border: 0, - color: 'white', - height: 48, - padding: '0 30px', - boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', - }, -}; - -function ReactJssButton(props) { +export default function EmotionCSS() { return (
- - + +
); } +``` + +### Controlling priority ⚠️ -ReactJssButton.propTypes = { - classes: PropTypes.object.isRequired, -}; +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; -export default injectSheet(styles)(ReactJssButton); + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/24kllqxvmp) \ No newline at end of file +### テーマ + +Material-UI has a rich theme structure that you can leverage for the color manipulations, the transitions, the media queries, and more. + +We encourage to share the same theme object between Material-UI and your styles. + +```jsx + +``` + +{{"demo": "pages/guides/interoperability/EmotionTheme.js"}} + +### The `styled()` API + +It works exactly like styled components. You can [use the same guide](/guides/interoperability/#styled-components). \ No newline at end of file diff --git a/docs/src/pages/guides/interoperability/interoperability-pt.md b/docs/src/pages/guides/interoperability/interoperability-pt.md index 5b4c9543895cfd..bddb29319b28f0 100644 --- a/docs/src/pages/guides/interoperability/interoperability-pt.md +++ b/docs/src/pages/guides/interoperability/interoperability-pt.md @@ -1,6 +1,6 @@ # Interoperabilidade da Biblioteca de Estilo -

Embora seja simples usar a solução de estilo baseada em JSS fornecida pelo Material-UI para estilizar sua aplicação, é possível usar qualquer solução de estilo que você preferir, do CSS puro a qualquer número de bibliotecas CSS-in-JS.

+

While you can use the JSS based styling solution provided by Material-UI to style your application, you can also use the one you already know and love (from plain CSS to styled-components).

Este guia tem como objetivo documentar as alternativas mais populares, mas você deve descobrir que os princípios aplicados aqui podem ser adaptados para outras bibliotecas. There are examples for the following styling solutions: @@ -10,23 +10,26 @@ Este guia tem como objetivo documentar as alternativas mais populares, mas você - [Módulos CSS](#styled-components) - [Emotion](#css-modules) - [React JSS](#react-jss) -- [Glamor](#glamor) ## CSS puro -Nothing fancy, plain old CSS. +Nothing fancy, just plain CSS. + +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/plain-css-mtzri) **PlainCssButton.css** ```css .button { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; } ``` @@ -39,32 +42,87 @@ import Button from '@material-ui/core/Button'; export default function PlainCssButton() { return (
- - + +
); } ``` -[![Botão editar](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/l5qv4y57vl) +### Controlling priority ⚠️ + +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; + + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` + +### Elementos mais profundos + +If you attempt to style a Drawer with variant permanent, you will likely need to affect the Drawer's child paper element. However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work. You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI. + +The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. + +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +**PlainCssButtonDeep.css** + +```css +.button { + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; +} +.button-label { + color: #fff; +} +``` + +**PlainCssButtonDeep.js** + +```jsx +import React from 'react'; +import Button from '@material-ui/core/Button'; -**Nota:** O JSS injeta seus estilos na parte inferior do ``. Se você não quiser marcar atributos de estilo com **!important**, você precisa alterar [a ordem de injeção do CSS](/styles/advanced/#css-injection-order), como na demonstração. +export default function PlainCssButtonDeep() { + return ( +
+ + +
+ ); +} +``` ## CSS global -Fornecer explicitamente os nomes das classes ao componente é um esforço excessivo? [Você pode segmentar os nomes de classe gerados por Material-UI](/styles/advanced/#with-material-ui-core). +Explicitly providing the class names to the component is too much effort? [You can target the class names generated by Material-UI](/styles/advanced/#with-material-ui-core). + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/global-css-bir9e) **GlobalCssButton.css** ```css .MuiButton-root { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.MuiButton-root:hover { + background-color: #5469d4; +} +.MuiButton-label { + color: #fff; } ``` @@ -75,52 +133,110 @@ import React from 'react'; import Button from '@material-ui/core/Button'; export default function GlobalCssButton() { - return ( -
- -
- ); + return ; } ``` -[![Botão editar](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9yxopv4vmp) +### Controlling priority ⚠️ + +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; -**Nota:** O JSS injeta seus estilos na parte inferior do ``. Se você não quiser marcar atributos de estilo com **!important**, você precisa alterar [a ordem de injeção do CSS](/styles/advanced/#css-injection-order), como na demonstração. + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` ## Styled Components ![estrelas](https://img.shields.io/github/stars/styled-components/styled-components.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/styled-components.svg?) -O método `styled()` funciona perfeitamente em todos os componentes. +The `styled()` method works perfectly on all of the components. + +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-r1fsr) + +```jsx +import React from 'react'; +import styled from 'styled-components'; +import Button from '@material-ui/core/Button'; -{{"demo": "pages/guides/interoperability/StyledComponents.js", "defaultCodeOpen": true}} +const StyledButton = styled(Button)` + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; + &:hover { + background-color: #5469d4; + } +`; + +export default function StyledComponents() { + return ( +
+ + Customized +
+ ); +} -[![Botão editar](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/k553lz1qrv) +``` -### Controlar Prioridade +### Controlling priority ⚠️ -**Nota:** Ambos, styled-components e JSS injetam seus estilos na parte inferior do ``. A melhor abordagem para garantir que os estilos do styled-components sejam carregados por último, é alterar [a ordem de injeção do CSS](/styles/advanced/#css-injection-order), como na demonstração: +**Note:** Both styled-components and JSS inject their styles at the bottom of the ``. The best approach to ensuring styled-components styles are loaded last is to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: ```jsx import { StylesProvider } from '@material-ui/core/styles'; {/* Your component tree. - Componentes com estilo podem sobrescrever os estilos de Material-UI. */} + Now, you can override Material-UI's styles. */} ``` -Outra abordagem é usar os caracteres `&&` em styled-components para [aumentar a especificidade](https://www.styled-components.com/docs/advanced#issues-with-specificity) repetindo o nome da classe. Avoid the usage of `!important`. +Another approach is to use the `&&` characters in styled-components to [bump up specificity](https://www.styled-components.com/docs/advanced#issues-with-specificity) by repeating the class name. Avoid the usage of `!important`. ### Elementos mais profundos -Se você tentar estilizar um Drawer com variante permanente, provavelmente precisará afetar o elemento Paper, elemento filho do Drawer. No entanto, o paper não é o elemento raiz do Drawer e, portanto, a customização de styled-components como acima não funcionará. Você precisa usar a API [`classes`](/styles/advanced/#overriding-styles-classes-prop) do Material-UI. +If you attempt to style a Drawer with variant permanent, you will likely need to affect the Drawer's child paper element. However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work. You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI. + +The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. It also works around [this styled-components issue](https://github.com/styled-components/styled-components/issues/439) by "consuming" properties that should not be passed on to the underlying component. + +{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js"}} + +```jsx +import React from 'react'; +import styled from 'styled-components'; +import Button from '@material-ui/core/Button'; -O exemplo a seguir sobrescreve o estilo de `label` e `Button`, além dos estilos customizados no próprio botão. Também funciona como solução de contorno [para este problema com styled-components](https://github.com/styled-components/styled-components/issues/439), por "consumir" propriedades que não devem ser passadas para o componente subjacente. +const StyledButton = styled(Button)` + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; + &:hover { + background-color: #5469d4; + } + & .MuiButton-label { + color: #fff; + } +`; -{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "defaultCodeOpen": true}} +export default function StyledComponentsDeep() { + return ( +
+ + Customized +
+ ); +} +``` -A demonstração acima depende [doa valores padrão de `classes`](/styles/advanced/#with-material-ui-core), mas você pode fornecer seu próprio nome de classe: `.label`. +The above demo relies on the [default `classes` values](/styles/advanced/#with-material-ui-core) but you can provide your own class name: `.label`. ```jsx import React from 'react'; @@ -130,39 +246,59 @@ import Button from '@material-ui/core/Button'; const StyledButton = styled(({ color, ...other }) => ( - Styled Components + + Customized ); } ``` -### ThemeProvider +### Tema -Material-UI tem uma estrutura de tema rica, que você pode aproveitar para manipulações de cores, transições, consultas de mídia e muito mais. +Material-UI has a rich theme structure that you can leverage for the color manipulations, the transitions, the media queries, and more. + +We encourage to share the same theme object between Material-UI and your styles. + +```jsx +const StyledButton = styled(Button)` + ${({ theme }) => ` + background-color: ${theme.palette.primary.main}; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 4px 10px; + font-size: 13px; + &:hover { + background-color: ${darken(theme.palette.primary.main, 0.2)}; + } + ${theme.breakpoints.up('sm')} { + font-size: 14px; + padding: 7px 14px; + } + `} +`; +``` {{"demo": "pages/guides/interoperability/StyledComponentsTheme.js"}} -### Portal +### Portals -O [Portal](/components/portal/) fornece uma maneira de primeira classe para renderizar filhos em um nó DOM que existe fora da hierarquia DOM do componente pai. Devido a maneira como o escopo de CSS do styled-components funciona, você pode encontrar problemas nos quais o estilo não é aplicado. +The [Portal](/components/portal/) provides a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. Because of the way styled-components scopes its CSS, you may run into issues where styling is not applied. -Por exemplo, se você tentar estilizar o [Menu](/components/menus/) de um componente [Select](/components/selects/) usando a propriedade `MenuProps`, você precisará passar a propriedade `className` para o elemento que está sendo renderizado fora de sua hierarquia DOM. O exemplo a seguir mostra uma solução alternativa: +For example, if you attempt to style the [Menu](/components/menus/) of a [Select](/components/selects/) component using the property `MenuProps`, you will need to pass along the `className` property to the element being rendered outside of it's DOM hierarchy. The following example shows a workaround: ```jsx import React from 'react'; @@ -189,19 +325,23 @@ const StyledMenu = styled(({ className, ...props }) => ( ![estrelas](https://img.shields.io/github/stars/css-modules/css-modules.svg?style=social&label=Star) -É difícil saber a participação de mercado [nesta solução de estilo](https://github.com/css-modules/css-modules), pois é dependente da solução de empacotamento que as pessoas estão usando. +It's hard to know the market share of [this styling solution](https://github.com/css-modules/css-modules) as it's dependent on the bundling solution people are using. + +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/css-modules-3j29h) **CssModulesButton.css** ```css .button { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; } ``` @@ -216,73 +356,149 @@ import Button from '@material-ui/core/Button'; export default function CssModulesButton() { return (
- - + +
); } ``` -[![Botão editar](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/5km241l9xn) +### Controlling priority ⚠️ -**Nota:** O JSS injeta seus estilos na parte inferior do ``. Se você não quiser marcar atributos de estilo com **!important**, você precisa alterar [a ordem de injeção do CSS](/styles/advanced/#css-injection-order), como na demonstração. +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: -## Emotion +```jsx +import { StylesProvider } from '@material-ui/core/styles'; -![estrelas](https://img.shields.io/github/stars/emotion-js/emotion.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/emotion.svg?) + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` + +### Elementos mais profundos + +If you attempt to style a Drawer with variant permanent, you will likely need to affect the Drawer's child paper element. However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work. You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI. + +The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. -### A propriedade `css` +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} -O método **css()** do Emotion funciona perfeitamente com Material-UI. +**CssModulesButtonDeep.css** -{{"demo": "pages/guides/interoperability/EmotionCSS.js", "defaultCodeOpen": true}} +```css +.root { + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.root:hover { + background-color: #5469d4; +} +.label { + color: #fff; +} +``` + +**CssModulesButtonDeep.js** + +```jsx +import React from 'react'; +// webpack, parcel or else will inject the CSS into the page +import styles from './CssModulesButtonDeep.css'; +import Button from '@material-ui/core/Button'; -[![Botão editar](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/yw93kl7y0j) +export default function CssModulesButtonDeep() { + return ( +
+ + +
+ ); +} +``` -**Nota:** O JSS injeta seus estilos na parte inferior do ``. Se você não quiser marcar atributos de estilo com **!important**, você precisa alterar [a ordem de injeção do CSS](/styles/advanced/#css-injection-order), como na demonstração. +## Emotion -### A API `styled()` +![estrelas](https://img.shields.io/github/stars/emotion-js/emotion.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/emotion.svg?) -Funciona exatamente como styled components. Você pode [usar o mesmo guia](/guides/interoperability/#styled-components). +### The `css` prop -## React JSS +Emotion's **css()** method works seamlessly with Material-UI. -![estrelas](https://img.shields.io/github/stars/cssinjs/jss.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/react-jss.svg?) +{{"demo": "pages/guides/interoperability/EmotionCSS.js", "hideHeader": true}} -A solução de estilo do Material-UI compartilha muitos blocos de construção com [react-jss](https://github.com/cssinjs/react-jss). A fork was needed in order to handle Material-UI's unique needs, but with the intent to merge the changes and fixes from Material-UI back to react-jss. +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/emotion-bgfxj) ```jsx -import React from 'react'; -import PropTypes from 'prop-types'; -import injectSheet from 'react-jss'; +/** @jsx jsx */ +import { jsx, css } from '@emotion/core'; import Button from '@material-ui/core/Button'; -const styles = { - button: { - background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', - borderRadius: 3, - border: 0, - color: 'white', - height: 48, - padding: '0 30px', - boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', - }, -}; - -function ReactJssButton(props) { +export default function EmotionCSS() { return (
- - + +
); } +``` + +### Controlling priority ⚠️ + +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; + + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` + +### Tema -ReactJssButton.propTypes = { - classes: PropTypes.object.isRequired, -}; +Material-UI has a rich theme structure that you can leverage for the color manipulations, the transitions, the media queries, and more. -export default injectSheet(styles)(ReactJssButton); +We encourage to share the same theme object between Material-UI and your styles. + +```jsx + ``` -[![Botão editar](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/24kllqxvmp) \ No newline at end of file +{{"demo": "pages/guides/interoperability/EmotionTheme.js"}} + +### The `styled()` API + +It works exactly like styled components. You can [use the same guide](/guides/interoperability/#styled-components). \ No newline at end of file diff --git a/docs/src/pages/guides/interoperability/interoperability-ru.md b/docs/src/pages/guides/interoperability/interoperability-ru.md index 5c931faed89914..3d7f4a9d84949b 100644 --- a/docs/src/pages/guides/interoperability/interoperability-ru.md +++ b/docs/src/pages/guides/interoperability/interoperability-ru.md @@ -1,6 +1,6 @@ # Style Library Interoperability -

While it is simple to use the JSS based styling solution provided by Material-UI to style your application, it is possible to use any styling solution you prefer, from plain CSS to any number of CSS-in-JS libraries.

+

While you can use the JSS based styling solution provided by Material-UI to style your application, you can also use the one you already know and love (from plain CSS to styled-components).

This guide aims to document the most popular alternatives, but you should find that the principals applied here can be adapted to other libraries. There are examples for the following styling solutions: @@ -10,23 +10,26 @@ This guide aims to document the most popular alternatives, but you should find t - [CSS Modules](#css-modules) - [Emotion](#emotion) - [React JSS](#react-jss) -- [Glamor](#glamor) ## Plain CSS -Nothing fancy, plain old CSS. +Nothing fancy, just plain CSS. + +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/plain-css-mtzri) **PlainCssButton.css** ```css .button { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; } ``` @@ -39,32 +42,87 @@ import Button from '@material-ui/core/Button'; export default function PlainCssButton() { return (
- - + +
); } ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/l5qv4y57vl) +### Controlling priority ⚠️ + +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; + + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` + +### Deeper elements + +If you attempt to style a Drawer with variant permanent, you will likely need to affect the Drawer's child paper element. However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work. You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI. + +The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. + +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} -**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo. +**PlainCssButtonDeep.css** + +```css +.button { + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; +} +.button-label { + color: #fff; +} +``` + +**PlainCssButtonDeep.js** + +```jsx +import React from 'react'; +import Button from '@material-ui/core/Button'; + +export default function PlainCssButtonDeep() { + return ( +
+ + +
+ ); +} +``` ## Глобальный CSS Explicitly providing the class names to the component is too much effort? [You can target the class names generated by Material-UI](/styles/advanced/#with-material-ui-core). +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/global-css-bir9e) + **GlobalCssButton.css** ```css .MuiButton-root { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.MuiButton-root:hover { + background-color: #5469d4; +} +.MuiButton-label { + color: #fff; } ``` @@ -75,17 +133,22 @@ import React from 'react'; import Button from '@material-ui/core/Button'; export default function GlobalCssButton() { - return ( -
- -
- ); + return ; } ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9yxopv4vmp) +### Controlling priority ⚠️ -**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo. +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; + + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` ## Styled Components @@ -93,11 +156,37 @@ export default function GlobalCssButton() { The `styled()` method works perfectly on all of the components. -{{"demo": "pages/guides/interoperability/StyledComponents.js", "defaultCodeOpen": true}} +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-r1fsr) + +```jsx +import React from 'react'; +import styled from 'styled-components'; +import Button from '@material-ui/core/Button'; + +const StyledButton = styled(Button)` + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; + &:hover { + background-color: #5469d4; + } +`; + +export default function StyledComponents() { + return ( +
+ + Customized +
+ ); +} -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/k553lz1qrv) +``` -### Controlling Priority +### Controlling priority ⚠️ **Note:** Both styled-components and JSS inject their styles at the bottom of the ``. The best approach to ensuring styled-components styles are loaded last is to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: @@ -106,7 +195,7 @@ import { StylesProvider } from '@material-ui/core/styles'; {/* Your component tree. - Styled components can override Material-UI's styles. */} + Now, you can override Material-UI's styles. */} ``` @@ -118,7 +207,34 @@ If you attempt to style a Drawer with variant permanent, you will likely need to The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. It also works around [this styled-components issue](https://github.com/styled-components/styled-components/issues/439) by "consuming" properties that should not be passed on to the underlying component. -{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "defaultCodeOpen": true}} +{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js"}} + +```jsx +import React from 'react'; +import styled from 'styled-components'; +import Button from '@material-ui/core/Button'; + +const StyledButton = styled(Button)` + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; + &:hover { + background-color: #5469d4; + } + & .MuiButton-label { + color: #fff; + } +`; + +export default function StyledComponentsDeep() { + return ( +
+ + Customized +
+ ); +} +``` The above demo relies on the [default `classes` values](/styles/advanced/#with-material-ui-core) but you can provide your own class name: `.label`. @@ -130,32 +246,52 @@ import Button from '@material-ui/core/Button'; const StyledButton = styled(({ color, ...other }) => ( - Styled Components + + Customized ); } ``` -### ThemeProvider +### Theme Material-UI has a rich theme structure that you can leverage for the color manipulations, the transitions, the media queries, and more. +We encourage to share the same theme object between Material-UI and your styles. + +```jsx +const StyledButton = styled(Button)` + ${({ theme }) => ` + background-color: ${theme.palette.primary.main}; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 4px 10px; + font-size: 13px; + &:hover { + background-color: ${darken(theme.palette.primary.main, 0.2)}; + } + ${theme.breakpoints.up('sm')} { + font-size: 14px; + padding: 7px 14px; + } + `} +`; +``` + {{"demo": "pages/guides/interoperability/StyledComponentsTheme.js"}} ### Portals @@ -191,17 +327,21 @@ const StyledMenu = styled(({ className, ...props }) => ( It's hard to know the market share of [this styling solution](https://github.com/css-modules/css-modules) as it's dependent on the bundling solution people are using. +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/css-modules-3j29h) + **CssModulesButton.css** ```css .button { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; } ``` @@ -216,73 +356,149 @@ import Button from '@material-ui/core/Button'; export default function CssModulesButton() { return (
- - + +
); } ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/5km241l9xn) +### Controlling priority ⚠️ -**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo. +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: -## Emotion +```jsx +import { StylesProvider } from '@material-ui/core/styles'; -![stars](https://img.shields.io/github/stars/emotion-js/emotion.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/emotion.svg?) + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` -### The `css` prop +### Deeper elements -Emotion's **css()** method works seamlessly with Material-UI. +If you attempt to style a Drawer with variant permanent, you will likely need to affect the Drawer's child paper element. However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work. You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI. -{{"demo": "pages/guides/interoperability/EmotionCSS.js", "defaultCodeOpen": true}} +The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/yw93kl7y0j) +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} -**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo. +**CssModulesButtonDeep.css** -### The `styled()` API +```css +.root { + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.root:hover { + background-color: #5469d4; +} +.label { + color: #fff; +} +``` -It works exactly like styled components. You can [use the same guide](/guides/interoperability/#styled-components). +**CssModulesButtonDeep.js** -## React JSS +```jsx +import React from 'react'; +// webpack, parcel or else will inject the CSS into the page +import styles from './CssModulesButtonDeep.css'; +import Button from '@material-ui/core/Button'; + +export default function CssModulesButtonDeep() { + return ( +
+ + +
+ ); +} +``` + +## Emotion + +![stars](https://img.shields.io/github/stars/emotion-js/emotion.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/emotion.svg?) + +### The `css` prop + +Emotion's **css()** method works seamlessly with Material-UI. -![stars](https://img.shields.io/github/stars/cssinjs/jss.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/react-jss.svg?) +{{"demo": "pages/guides/interoperability/EmotionCSS.js", "hideHeader": true}} -Material-UI's styling solution shares many building blocks with [react-jss](https://github.com/cssinjs/react-jss). A fork was needed in order to handle Material-UI's unique needs, but with the intent to merge the changes and fixes from Material-UI back to react-jss. +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/emotion-bgfxj) ```jsx -import React from 'react'; -import PropTypes from 'prop-types'; -import injectSheet from 'react-jss'; +/** @jsx jsx */ +import { jsx, css } from '@emotion/core'; import Button from '@material-ui/core/Button'; -const styles = { - button: { - background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', - borderRadius: 3, - border: 0, - color: 'white', - height: 48, - padding: '0 30px', - boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', - }, -}; - -function ReactJssButton(props) { +export default function EmotionCSS() { return (
- - + +
); } +``` + +### Controlling priority ⚠️ -ReactJssButton.propTypes = { - classes: PropTypes.object.isRequired, -}; +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; -export default injectSheet(styles)(ReactJssButton); + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/24kllqxvmp) \ No newline at end of file +### Theme + +Material-UI has a rich theme structure that you can leverage for the color manipulations, the transitions, the media queries, and more. + +We encourage to share the same theme object between Material-UI and your styles. + +```jsx + +``` + +{{"demo": "pages/guides/interoperability/EmotionTheme.js"}} + +### The `styled()` API + +It works exactly like styled components. You can [use the same guide](/guides/interoperability/#styled-components). \ No newline at end of file diff --git a/docs/src/pages/guides/interoperability/interoperability-zh.md b/docs/src/pages/guides/interoperability/interoperability-zh.md index d3196b519d9bf3..2f61e5d0127a5d 100644 --- a/docs/src/pages/guides/interoperability/interoperability-zh.md +++ b/docs/src/pages/guides/interoperability/interoperability-zh.md @@ -1,6 +1,6 @@ # 样式库的互通性 -

虽然使用由 Material-UI 提供的基于JSS的样式解决方案来设置您的应用程序样式比较简单，但您依旧可以在从纯 CSS 到任意数量的 CSS-in-JS 库的方案中选择，来实现您所偏好的样式方案。

+

While you can use the JSS based styling solution provided by Material-UI to style your application, you can also use the one you already know and love (from plain CSS to styled-components).

本指南旨在归档当前比较流行的一些替代方案，但是您应该可以发现在这里运用的法则也可以在其他库里适用。 There are examples for the following styling solutions: @@ -10,23 +10,26 @@ - [CSS Modules](#css-modules) - [Emotion](#css-modules) - [React JSS](#emotion) -- [Glamor](#glamor) ## 纯 CSS -Nothing fancy, plain old CSS. +Nothing fancy, just plain CSS. + +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/plain-css-mtzri) **PlainCssButton.css** ```css .button { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; } ``` @@ -39,32 +42,87 @@ import Button from '@material-ui/core/Button'; export default function PlainCssButton() { return (
- - + +
); } ``` -[![编辑按钮](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/l5qv4y57vl) +### Controlling priority ⚠️ + +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; + + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` + +### 更深层的元素 + +If you attempt to style a Drawer with variant permanent, you will likely need to affect the Drawer's child paper element. However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work. You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI. + +The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. + +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +**PlainCssButtonDeep.css** + +```css +.button { + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; +} +.button-label { + color: #fff; +} +``` + +**PlainCssButtonDeep.js** + +```jsx +import React from 'react'; +import Button from '@material-ui/core/Button'; -**请注意：** JSS 在 `` 底部注入其样式表。 如果您不想使用 **!important** 来标记样式属性，您则需要更改 [CSS 的注入顺序](/styles/advanced/#css-injection-order)，如上所示。 +export default function PlainCssButtonDeep() { + return ( +
+ + +
+ ); +} +``` ## 全局 CSS -明确向提组件提供类名是不是太大费周章了？ [您可以定位到由 Material-UI 生成的类名](/styles/advanced/#with-material-ui-core)。 +Explicitly providing the class names to the component is too much effort? [You can target the class names generated by Material-UI](/styles/advanced/#with-material-ui-core). + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/global-css-bir9e) **GlobalCssButton.css** ```css .MuiButton-root { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.MuiButton-root:hover { + background-color: #5469d4; +} +.MuiButton-label { + color: #fff; } ``` @@ -75,52 +133,110 @@ import React from 'react'; import Button from '@material-ui/core/Button'; export default function GlobalCssButton() { - return ( -
- -
- ); + return ; } ``` -[![编辑按钮](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9yxopv4vmp) +### Controlling priority ⚠️ + +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; -**请注意：** JSS 在 `` 底部注入其样式表。 如果您不想使用 **!important** 来标记样式属性，您则需要更改 [CSS 的注入顺序](/styles/advanced/#css-injection-order)，如上所示。 + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` ## Styled Components -![评星](https://img.shields.io/github/stars/styled-components/styled-components.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/styled-components.svg?) +![stars](https://img.shields.io/github/stars/styled-components/styled-components.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/styled-components.svg?) The `styled()` method works perfectly on all of the components. -{{"demo": "pages/guides/interoperability/StyledComponents.js", "defaultCodeOpen": true}} +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} -[![编辑按钮](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/k553lz1qrv) +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-r1fsr) -### 控制的优先权 +```jsx +import React from 'react'; +import styled from 'styled-components'; +import Button from '@material-ui/core/Button'; -**请注意：** styled-components 和 JSS 都在 `` 的底部注入其样式表。 若想要 styled-components 的样式在最后加载，我们推荐的最佳方法是更改 [CSS 的注入顺序](/styles/advanced/#css-injection-order)，如下演示： +const StyledButton = styled(Button)` + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; + &:hover { + background-color: #5469d4; + } +`; + +export default function StyledComponents() { + return ( +
+ + Customized +
+ ); +} + +``` + +### Controlling priority ⚠️ + +**Note:** Both styled-components and JSS inject their styles at the bottom of the ``. The best approach to ensuring styled-components styles are loaded last is to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: ```jsx import { StylesProvider } from '@material-ui/core/styles'; {/* Your component tree. - 样式化组件可以覆盖 Material-UI 的样式。 */} + Now, you can override Material-UI's styles. */} ``` -另外一个在 styled-components 中使用 `&&` 字符的方案则是通过重复类名来[增强特征](https://www.styled-components.com/docs/advanced#issues-with-specificity)。 Avoid the usage of `!important`. +Another approach is to use the `&&` characters in styled-components to [bump up specificity](https://www.styled-components.com/docs/advanced#issues-with-specificity) by repeating the class name. Avoid the usage of `!important`. ### 更深层的元素 -如果您尝试赋予Drawer（抽屉）组件以永久的变体的样式，您很可能会需要涉及抽屉组件的子纸张元素。 但是，这不是抽屉组件的根元素，因此上面的样式组件自定义将不起作用。 您则需要使用 Material-UI 的 API 中的 [`classes`](/styles/advanced/#overriding-styles-classes-prop) 来达到目的。 +If you attempt to style a Drawer with variant permanent, you will likely need to affect the Drawer's child paper element. However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work. You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI. + +The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. It also works around [this styled-components issue](https://github.com/styled-components/styled-components/issues/439) by "consuming" properties that should not be passed on to the underlying component. + +{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js"}} + +```jsx +import React from 'react'; +import styled from 'styled-components'; +import Button from '@material-ui/core/Button'; -以下示例除了影响按钮本身的自定义样式外，还会覆盖 `Button` 的 `label` 样式。 通过”消耗”一些不应该传递到底层组件的属性，它还解决了[这个 styled-components 的问题](https://github.com/styled-components/styled-components/issues/439)。 +const StyledButton = styled(Button)` + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; + &:hover { + background-color: #5469d4; + } + & .MuiButton-label { + color: #fff; + } +`; -{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "defaultCodeOpen": true}} +export default function StyledComponentsDeep() { + return ( +
+ + Customized +
+ ); +} +``` -以上的例子依赖于[默认的`类`的值](/styles/advanced/#with-material-ui-core)，但是您也可以提供自定义的类名：`.label`。 +The above demo relies on the [default `classes` values](/styles/advanced/#with-material-ui-core) but you can provide your own class name: `.label`. ```jsx import React from 'react'; @@ -130,39 +246,59 @@ import Button from '@material-ui/core/Button'; const StyledButton = styled(({ color, ...other }) => ( - Styled Components + + Customized ); } ``` -### 主题供应站 +### 主题 + +Material-UI has a rich theme structure that you can leverage for the color manipulations, the transitions, the media queries, and more. -Material-UI 有着一个丰富的主题架构，而您可以利用它来做一些颜色的处理，过渡动画，媒体查询等等。 +We encourage to share the same theme object between Material-UI and your styles. + +```jsx +const StyledButton = styled(Button)` + ${({ theme }) => ` + background-color: ${theme.palette.primary.main}; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 4px 10px; + font-size: 13px; + &:hover { + background-color: ${darken(theme.palette.primary.main, 0.2)}; + } + ${theme.breakpoints.up('sm')} { + font-size: 14px; + padding: 7px 14px; + } + `} +`; +``` -{{“demo”：“pages/guides/interoperability/StyledComponentsTheme.js”}} +{{"demo": "pages/guides/interoperability/StyledComponentsTheme.js"}} -### Portals（传送门组件） +### Portals -[传送门组件](/components/portal/)提供了一种一流的方法，它将子元素渲染在其父组件的 DOM 层次结构之外的 DOM 节点中。 当您使用这样的 styled-components 规范其 CSS 的方式时，可能会遇到一些无法附着样式的问题。 +The [Portal](/components/portal/) provides a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. Because of the way styled-components scopes its CSS, you may run into issues where styling is not applied. -例如，若您尝试用 `MenuProps` 属性来样式化 [Select](/components/selects/) 组件的 [Menu](/components/menus/)，您将需要将 `className` 属性传递到它的 DOM 层次结构之外渲染的元素当中。 下面的示例演示了一个变通办法： +For example, if you attempt to style the [Menu](/components/menus/) of a [Select](/components/selects/) component using the property `MenuProps`, you will need to pass along the `className` property to the element being rendered outside of it's DOM hierarchy. The following example shows a workaround: ```jsx import React from 'react'; @@ -187,21 +323,25 @@ const StyledMenu = styled(({ className, ...props }) => ( ## CSS Modules -![评星](https://img.shields.io/github/stars/css-modules/css-modules.svg?style=social&label=Star) +![stars](https://img.shields.io/github/stars/css-modules/css-modules.svg?style=social&label=Star) + +It's hard to know the market share of [this styling solution](https://github.com/css-modules/css-modules) as it's dependent on the bundling solution people are using. -鉴于它全权依赖于大家使用的打包方案，我们很难得知[此种样式方案](https://github.com/css-modules/css-modules)的市场占有率。 +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/css-modules-3j29h) **CssModulesButton.css** ```css .button { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; } ``` @@ -216,73 +356,149 @@ import Button from '@material-ui/core/Button'; export default function CssModulesButton() { return (
- - + +
); } ``` -[![编辑按钮](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/5km241l9xn) +### Controlling priority ⚠️ -**请注意：** JSS 在 `` 底部注入其样式表。 如果您不想使用 **!important** 来标记样式属性，您则需要更改 [CSS 的注入顺序](/styles/advanced/#css-injection-order)，如上所示。 +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: -## Emotion +```jsx +import { StylesProvider } from '@material-ui/core/styles'; -![评星](https://img.shields.io/github/stars/emotion-js/emotion.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/emotion.svg?) + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` -### `css` 属性 +### 更深层的元素 -Emotion的 **css()** 方法与Material-UI无缝协作。 +If you attempt to style a Drawer with variant permanent, you will likely need to affect the Drawer's child paper element. However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work. You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI. -{{"demo": "pages/guides/interoperability/EmotionCSS.js", "defaultCodeOpen": true}} +The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. -[![编辑按钮](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/yw93kl7y0j) +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} -**请注意：** JSS 在 `` 底部注入其样式表。 如果您不想使用 **!important** 来标记样式属性，您则需要更改 [CSS 的注入顺序](/styles/advanced/#css-injection-order)，如上所示。 +**CssModulesButtonDeep.css** -### `styled()` 的 API +```css +.root { + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.root:hover { + background-color: #5469d4; +} +.label { + color: #fff; +} +``` + +**CssModulesButtonDeep.js** + +```jsx +import React from 'react'; +// webpack, parcel or else will inject the CSS into the page +import styles from './CssModulesButtonDeep.css'; +import Button from '@material-ui/core/Button'; + +export default function CssModulesButtonDeep() { + return ( +
+ + +
+ ); +} +``` + +## Emotion + +![stars](https://img.shields.io/github/stars/emotion-js/emotion.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/emotion.svg?) -它完全和 styled components 一样起作用。 您可以[使用相同的指南](/guides/interoperability/#styled-components) 。 +### The `css` prop -## React JSS +Emotion's **css()** method works seamlessly with Material-UI. -![评星](https://img.shields.io/github/stars/cssinjs/jss.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/react-jss.svg?) +{{"demo": "pages/guides/interoperability/EmotionCSS.js", "hideHeader": true}} -Material-UI 的样式方案与 [react-jss](https://github.com/cssinjs/react-jss) 共享了许多代码块。 A fork was needed in order to handle Material-UI's unique needs, but with the intent to merge the changes and fixes from Material-UI back to react-jss. +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/emotion-bgfxj) ```jsx -import React from 'react'; -import PropTypes from 'prop-types'; -import injectSheet from 'react-jss'; +/** @jsx jsx */ +import { jsx, css } from '@emotion/core'; import Button from '@material-ui/core/Button'; -const styles = { - button: { - background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', - borderRadius: 3, - border: 0, - color: 'white', - height: 48, - padding: '0 30px', - boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', - }, -}; - -function ReactJssButton(props) { +export default function EmotionCSS() { return (
- - + +
); } +``` + +### Controlling priority ⚠️ -ReactJssButton.propTypes = { - classes: PropTypes.object.isRequired, -}; +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: -export default injectSheet(styles)(ReactJssButton); +```jsx +import { StylesProvider } from '@material-ui/core/styles'; + + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + ``` -[![编辑按钮](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/24kllqxvmp) \ No newline at end of file +### 主题 + +Material-UI has a rich theme structure that you can leverage for the color manipulations, the transitions, the media queries, and more. + +We encourage to share the same theme object between Material-UI and your styles. + +```jsx + +``` + +{{"demo": "pages/guides/interoperability/EmotionTheme.js"}} + +### The `styled()` API + +It works exactly like styled components. You can [use the same guide](/guides/interoperability/#styled-components). \ No newline at end of file diff --git a/docs/src/pages/guides/localization/localization-aa.md b/docs/src/pages/guides/localization/localization-aa.md index 9c642d4718fa3f..788792c42435f4 100644 --- a/docs/src/pages/guides/localization/localization-aa.md +++ b/docs/src/pages/guides/localization/localization-aa.md @@ -17,27 +17,31 @@ crwdns105209:0{ createMuiTheme, ThemeProvider }crwdnd105209:0{ zhCN }crwdnd10520 | crwdns105213:0crwdne105213:0 | crwdns105215:0crwdne105215:0 | crwdns105217:0crwdne105217:0 | |:---------------------------- |:---------------------------- |:------------------------------ | | crwdns106597:0crwdne106597:0 | crwdns106599:0crwdne106599:0 | `crwdns106601:0crwdne106601:0` | -| crwdns106603:0crwdne106603:0 | crwdns106605:0crwdne106605:0 | `crwdns106607:0crwdne106607:0` | -| crwdns106925:0crwdne106925:0 | crwdns106927:0crwdne106927:0 | `crwdns107033:0crwdne107033:0` | -| crwdns106931:0crwdne106931:0 | crwdns106933:0crwdne106933:0 | `crwdns106935:0crwdne106935:0` | -| crwdns106937:0crwdne106937:0 | crwdns106939:0crwdne106939:0 | `crwdns106941:0crwdne106941:0` | -| crwdns106943:0crwdne106943:0 | crwdns106945:0crwdne106945:0 | `crwdns106947:0crwdne106947:0` | -| crwdns106949:0crwdne106949:0 | crwdns106951:0crwdne106951:0 | `crwdns106953:0crwdne106953:0` | -| crwdns106955:0crwdne106955:0 | crwdns106957:0crwdne106957:0 | `crwdns106959:0crwdne106959:0` | -| crwdns106961:0crwdne106961:0 | crwdns106963:0crwdne106963:0 | `crwdns106965:0crwdne106965:0` | -| crwdns106967:0crwdne106967:0 | crwdns106969:0crwdne106969:0 | `crwdns106971:0crwdne106971:0` | -| crwdns107133:0crwdne107133:0 | crwdns107135:0crwdne107135:0 | `crwdns107137:0crwdne107137:0` | -| crwdns107139:0crwdne107139:0 | crwdns107141:0crwdne107141:0 | `crwdns107143:0crwdne107143:0` | -| crwdns107145:0crwdne107145:0 | crwdns107147:0crwdne107147:0 | `crwdns107149:0crwdne107149:0` | -| crwdns107151:0crwdne107151:0 | crwdns107153:0crwdne107153:0 | `crwdns107155:0crwdne107155:0` | -| crwdns107157:0crwdne107157:0 | crwdns107159:0crwdne107159:0 | `crwdns107161:0crwdne107161:0` | -| crwdns107163:0crwdne107163:0 | crwdns107165:0crwdne107165:0 | `crwdns107167:0crwdne107167:0` | -| crwdns107169:0crwdne107169:0 | crwdns107171:0crwdne107171:0 | `crwdns107173:0crwdne107173:0` | -| crwdns107175:0crwdne107175:0 | crwdns107177:0crwdne107177:0 | `crwdns107179:0crwdne107179:0` | -| crwdns107181:0crwdne107181:0 | crwdns107183:0crwdne107183:0 | `crwdns107185:0crwdne107185:0` | -| crwdns107187:0crwdne107187:0 | crwdns107189:0crwdne107189:0 | `crwdns107191:0crwdne107191:0` | -| crwdns107193:0crwdne107193:0 | crwdns107195:0crwdne107195:0 | `crwdns107197:0crwdne107197:0` | -| crwdns107199:0crwdne107199:0 | crwdns107201:0crwdne107201:0 | `crwdns107203:0crwdne107203:0` | +| crwdns107639:0crwdne107639:0 | crwdns107641:0crwdne107641:0 | `crwdns107643:0crwdne107643:0` | +| crwdns108361:0crwdne108361:0 | crwdns108363:0crwdne108363:0 | `crwdns108365:0crwdne108365:0` | +| crwdns108367:0crwdne108367:0 | crwdns108369:0crwdne108369:0 | `crwdns108371:0crwdne108371:0` | +| crwdns108373:0crwdne108373:0 | crwdns108375:0crwdne108375:0 | `crwdns108377:0crwdne108377:0` | +| crwdns108379:0crwdne108379:0 | crwdns108381:0crwdne108381:0 | `crwdns108383:0crwdne108383:0` | +| crwdns108385:0crwdne108385:0 | crwdns108387:0crwdne108387:0 | `crwdns108389:0crwdne108389:0` | +| crwdns108391:0crwdne108391:0 | crwdns108393:0crwdne108393:0 | `crwdns108395:0crwdne108395:0` | +| crwdns108397:0crwdne108397:0 | crwdns108399:0crwdne108399:0 | `crwdns108401:0crwdne108401:0` | +| crwdns108403:0crwdne108403:0 | crwdns108405:0crwdne108405:0 | `crwdns108407:0crwdne108407:0` | +| crwdns108409:0crwdne108409:0 | crwdns108411:0crwdne108411:0 | `crwdns108413:0crwdne108413:0` | +| crwdns108415:0crwdne108415:0 | crwdns108417:0crwdne108417:0 | `crwdns108419:0crwdne108419:0` | +| crwdns108421:0crwdne108421:0 | crwdns108423:0crwdne108423:0 | `crwdns108425:0crwdne108425:0` | +| crwdns108427:0crwdne108427:0 | crwdns108429:0crwdne108429:0 | `crwdns108431:0crwdne108431:0` | +| crwdns108433:0crwdne108433:0 | crwdns108435:0crwdne108435:0 | `crwdns108437:0crwdne108437:0` | +| crwdns108439:0crwdne108439:0 | crwdns108441:0crwdne108441:0 | `crwdns108443:0crwdne108443:0` | +| crwdns108445:0crwdne108445:0 | crwdns108447:0crwdne108447:0 | `crwdns108449:0crwdne108449:0` | +| crwdns108451:0crwdne108451:0 | crwdns108453:0crwdne108453:0 | `crwdns108455:0crwdne108455:0` | +| crwdns108457:0crwdne108457:0 | crwdns108459:0crwdne108459:0 | `crwdns108461:0crwdne108461:0` | +| crwdns108463:0crwdne108463:0 | crwdns108465:0crwdne108465:0 | `crwdns108467:0crwdne108467:0` | +| crwdns108469:0crwdne108469:0 | crwdns108471:0crwdne108471:0 | `crwdns108473:0crwdne108473:0` | +| crwdns108475:0crwdne108475:0 | crwdns108477:0crwdne108477:0 | `crwdns108479:0crwdne108479:0` | +| crwdns108481:0crwdne108481:0 | crwdns108483:0crwdne108483:0 | `crwdns108485:0crwdne108485:0` | +| crwdns108487:0crwdne108487:0 | crwdns108489:0crwdne108489:0 | `crwdns108491:0crwdne108491:0` | +| crwdns108493:0crwdne108493:0 | crwdns108495:0crwdne108495:0 | `crwdns108497:0crwdne108497:0` | +| crwdns108499:0crwdne108499:0 | crwdns108501:0crwdne108501:0 | `crwdns108503:0crwdne108503:0` | crwdns105285:0crwdne105285:0 diff --git a/docs/src/pages/guides/localization/localization-de.md b/docs/src/pages/guides/localization/localization-de.md index 3216d20793a9df..202bd4ebc4247d 100644 --- a/docs/src/pages/guides/localization/localization-de.md +++ b/docs/src/pages/guides/localization/localization-de.md @@ -28,10 +28,13 @@ const theme = createMuiTheme({ | Locale | BCP 47 language tag | Inportname | |:----------------------- |:------------------- |:---------- | | Azerbaijani | az-AZ | `azAZ` | +| Bulgarian | bg-BG | `bgBG` | +| Catalan | ca-ES | `caES` | | Chinese (Simplified) | zh-CN | `zhCN` | | Czech | cs-CZ | `csCZ` | | Dutch | nl-NL | `nlNL` | | English (United States) | en-US | `enUS` | +| Finnish | fi-FI | `fiFI` | | French | fr-FR | `frFR` | | German | de-DE | `deDE` | | Indonesian | id-ID | `idID` | @@ -49,6 +52,7 @@ const theme = createMuiTheme({ | Swedish | sv-SE | `svSE` | | Turkish | tr-TR | `trTR` | | Ukrainian | uk-UA | `ukUA` | +| Vietnamese | vi-VN | `viVN` | You can [find the source](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/locale/index.js) in the GitHub repository. diff --git a/docs/src/pages/guides/localization/localization-es.md b/docs/src/pages/guides/localization/localization-es.md index 2eada86c9c7643..c038a2fcbb7895 100644 --- a/docs/src/pages/guides/localization/localization-es.md +++ b/docs/src/pages/guides/localization/localization-es.md @@ -28,10 +28,13 @@ const theme = createMuiTheme({ | Locale | BCP 47 language tag | Nombre del import | |:----------------------- |:------------------- |:----------------- | | Azerbaijani | az-AZ | `azAZ` | +| Bulgarian | bg-BG | `bgBG` | +| Catalan | ca-ES | `caES` | | Chinese (Simplified) | zh-CN | `zhCN` | | Czech | cs-CZ | `csCZ` | | Dutch | nl-NL | `nlNL` | | English (United States) | en-US | `enUS` | +| Finnish | fi-FI | `fiFI` | | French | fr-FR | `frFR` | | German | de-DE | `deDE` | | Indonesian | id-ID | `idID` | @@ -49,6 +52,7 @@ const theme = createMuiTheme({ | Swedish | sv-SE | `svSE` | | Turkish | tr-TR | `trTR` | | Ukrainian | uk-UA | `ukUA` | +| Vietnamese | vi-VN | `viVN` | You can [find the source](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/locale/index.js) in the GitHub repository. diff --git a/docs/src/pages/guides/localization/localization-fr.md b/docs/src/pages/guides/localization/localization-fr.md index 9f699749224161..66724808d8b6a4 100644 --- a/docs/src/pages/guides/localization/localization-fr.md +++ b/docs/src/pages/guides/localization/localization-fr.md @@ -28,10 +28,13 @@ const theme = createMuiTheme({ | Locale | BCP 47 language tag | Import name | |:----------------------- |:------------------- |:----------- | | Azerbaijani | az-AZ | `azAZ` | +| Bulgarian | bg-BG | `bgBG` | +| Catalan | ca-ES | `caES` | | Chinese (Simplified) | zh-CN | `zhCN` | | Czech | cs-CZ | `csCZ` | | Dutch | nl-NL | `nlNL` | | English (United States) | en-US | `enUS` | +| Finnish | fi-FI | `fiFI` | | French | fr-FR | `frFR` | | German | de-DE | `deDE` | | Indonesian | id-ID | `idID` | @@ -49,6 +52,7 @@ const theme = createMuiTheme({ | Swedish | sv-SE | `svSE` | | Turkish | tr-TR | `trTR` | | Ukrainian | uk-UA | `ukUA` | +| Vietnamese | vi-VN | `viVN` | You can [find the source](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/locale/index.js) in the GitHub repository. diff --git a/docs/src/pages/guides/localization/localization-ja.md b/docs/src/pages/guides/localization/localization-ja.md index 91166985ba76a8..00d15f7539a129 100644 --- a/docs/src/pages/guides/localization/localization-ja.md +++ b/docs/src/pages/guides/localization/localization-ja.md @@ -28,10 +28,13 @@ const theme = createMuiTheme({ | Locale | BCP 47 language tag | Import name | |:----------------------- |:------------------- |:----------- | | Azerbaijani | az-AZ | `azAZ` | +| Bulgarian | bg-BG | `bgBG` | +| Catalan | ca-ES | `caES` | | Chinese (Simplified) | zh-CN | `zhCN` | | Czech | cs-CZ | `csCZ` | | Dutch | nl-NL | `nlNL` | | English (United States) | en-US | `enUS` | +| Finnish | fi-FI | `fiFI` | | French | fr-FR | `frFR` | | German | de-DE | `deDE` | | Indonesian | id-ID | `idID` | @@ -49,6 +52,7 @@ const theme = createMuiTheme({ | Swedish | sv-SE | `svSE` | | Turkish | tr-TR | `trTR` | | Ukrainian | uk-UA | `ukUA` | +| Vietnamese | vi-VN | `viVN` | You can [find the source](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/locale/index.js) in the GitHub repository. diff --git a/docs/src/pages/guides/localization/localization-pt.md b/docs/src/pages/guides/localization/localization-pt.md index 81ae9cd9c25e06..a74eaddae605aa 100644 --- a/docs/src/pages/guides/localization/localization-pt.md +++ b/docs/src/pages/guides/localization/localization-pt.md @@ -28,10 +28,13 @@ const theme = createMuiTheme({ | Locale | BCP 47 language tag | Nome da importação | |:----------------------- |:------------------- |:------------------ | | Azerbaijani | az-AZ | `azAZ` | +| Bulgarian | bg-BG | `bgBG` | +| Catalan | ca-ES | `caES` | | Chinese (Simplified) | zh-CN | `zhCN` | | Czech | cs-CZ | `csCZ` | | Dutch | nl-NL | `nlNL` | | English (United States) | en-US | `enUS` | +| Finnish | fi-FI | `fiFI` | | French | fr-FR | `frFR` | | German | de-DE | `deDE` | | Indonesian | id-ID | `idID` | @@ -49,6 +52,7 @@ const theme = createMuiTheme({ | Swedish | sv-SE | `svSE` | | Turkish | tr-TR | `trTR` | | Ukrainian | uk-UA | `ukUA` | +| Vietnamese | vi-VN | `viVN` | You can [find the source](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/locale/index.js) in the GitHub repository. diff --git a/docs/src/pages/guides/localization/localization-ru.md b/docs/src/pages/guides/localization/localization-ru.md index e8aeb7b358af66..54aa37a1a5d762 100644 --- a/docs/src/pages/guides/localization/localization-ru.md +++ b/docs/src/pages/guides/localization/localization-ru.md @@ -28,10 +28,13 @@ const theme = createMuiTheme({ | Locale | BCP 47 language tag | Импорт | |:----------------------- |:------------------- |:------ | | Azerbaijani | az-AZ | `azAZ` | +| Bulgarian | bg-BG | `bgBG` | +| Catalan | ca-ES | `caES` | | Chinese (Simplified) | zh-CN | `zhCN` | | Czech | cs-CZ | `csCZ` | | Dutch | nl-NL | `nlNL` | | English (United States) | en-US | `enUS` | +| Finnish | fi-FI | `fiFI` | | French | fr-FR | `frFR` | | German | de-DE | `deDE` | | Indonesian | id-ID | `idID` | @@ -49,6 +52,7 @@ const theme = createMuiTheme({ | Swedish | sv-SE | `svSE` | | Turkish | tr-TR | `trTR` | | Ukrainian | uk-UA | `ukUA` | +| Vietnamese | vi-VN | `viVN` | You can [find the source](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/locale/index.js) in the GitHub repository. diff --git a/docs/src/pages/guides/localization/localization-zh.md b/docs/src/pages/guides/localization/localization-zh.md index f0f61a98b4ebc7..95210592940cdf 100644 --- a/docs/src/pages/guides/localization/localization-zh.md +++ b/docs/src/pages/guides/localization/localization-zh.md @@ -28,10 +28,13 @@ const theme = createMuiTheme({ | Locale | BCP 47 language tag | 导入名称 | |:----------------------- |:------------------- |:------ | | Azerbaijani | az-AZ | `azAZ` | +| Bulgarian | bg-BG | `bgBG` | +| Catalan | ca-ES | `caES` | | Chinese (Simplified) | zh-CN | `zhCN` | | Czech | cs-CZ | `csCZ` | | Dutch | nl-NL | `nlNL` | | English (United States) | en-US | `enUS` | +| Finnish | fi-FI | `fiFI` | | French | fr-FR | `frFR` | | German | de-DE | `deDE` | | Indonesian | id-ID | `idID` | @@ -49,6 +52,7 @@ const theme = createMuiTheme({ | Swedish | sv-SE | `svSE` | | Turkish | tr-TR | `trTR` | | Ukrainian | uk-UA | `ukUA` | +| Vietnamese | vi-VN | `viVN` | You can [find the source](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/locale/index.js) in the GitHub repository. diff --git a/docs/src/pages/guides/testing/testing-aa.md b/docs/src/pages/guides/testing/testing-aa.md index e8c89a118933f5..2f00e3d0d9614b 100644 --- a/docs/src/pages/guides/testing/testing-aa.md +++ b/docs/src/pages/guides/testing/testing-aa.md @@ -6,7 +6,7 @@ crwdns96596:0crwdne96596:0 ## crwdns96598:0crwdne96598:0 -crwdns101344:0crwdne101344:0 crwdns101346:0crwdne101346:0 +crwdns107771:0crwdne107771:0 crwdns101346:0crwdne101346:0 ## crwdns96614:0crwdne96614:0 diff --git a/docs/src/pages/guides/testing/testing-de.md b/docs/src/pages/guides/testing/testing-de.md index 376ecb1c8f9a25..922e3b1f6ab2e7 100644 --- a/docs/src/pages/guides/testing/testing-de.md +++ b/docs/src/pages/guides/testing/testing-de.md @@ -6,7 +6,7 @@ Die Beispiele in diesem Abschnitt verwenden [globale Methoden von Mocha](https:/ ## Intern -Material-UI has a wide **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md). +Material-UI has **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md). ## Benutzerraum diff --git a/docs/src/pages/guides/testing/testing-es.md b/docs/src/pages/guides/testing/testing-es.md index d3504a721c5710..2c577812f5d1c3 100644 --- a/docs/src/pages/guides/testing/testing-es.md +++ b/docs/src/pages/guides/testing/testing-es.md @@ -6,7 +6,7 @@ Examples in this guide use [global methods from Mocha](https://mochajs.org/api/g ## Internal -Material-UI has a wide **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md). +Material-UI has **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md). ## Userspace diff --git a/docs/src/pages/guides/testing/testing-fr.md b/docs/src/pages/guides/testing/testing-fr.md index 3c376ca1666958..0f5eafb935d152 100644 --- a/docs/src/pages/guides/testing/testing-fr.md +++ b/docs/src/pages/guides/testing/testing-fr.md @@ -6,7 +6,7 @@ Examples in this guide use [global methods from Mocha](https://mochajs.org/api/g ## Internal -Material-UI has a wide **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md). +Material-UI has **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md). ## Userspace diff --git a/docs/src/pages/guides/testing/testing-ja.md b/docs/src/pages/guides/testing/testing-ja.md index 44160b9d12f0df..3a50b8eb70608a 100644 --- a/docs/src/pages/guides/testing/testing-ja.md +++ b/docs/src/pages/guides/testing/testing-ja.md @@ -6,7 +6,7 @@ ## Internal -Material-UI has a wide **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md). +Material-UI has **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md). ## Userspace diff --git a/docs/src/pages/guides/testing/testing-pt.md b/docs/src/pages/guides/testing/testing-pt.md index 602b0b376a7af1..b79221a33ea990 100644 --- a/docs/src/pages/guides/testing/testing-pt.md +++ b/docs/src/pages/guides/testing/testing-pt.md @@ -6,7 +6,7 @@ Exemplos neste guia usam [métodos globais do Mocha](https://mochajs.org/api/glo ## Interno -Material-UI has a wide **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md). +Material-UI has **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md). ## Espaço do usuário diff --git a/docs/src/pages/guides/testing/testing-ru.md b/docs/src/pages/guides/testing/testing-ru.md index 94ee703a646135..2e962190b0dc04 100644 --- a/docs/src/pages/guides/testing/testing-ru.md +++ b/docs/src/pages/guides/testing/testing-ru.md @@ -6,7 +6,7 @@ Examples in this guide use [global methods from Mocha](https://mochajs.org/api/g ## Internal -Material-UI has a wide **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md). +Material-UI has **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md). ## Userspace diff --git a/docs/src/pages/guides/testing/testing-zh.md b/docs/src/pages/guides/testing/testing-zh.md index 429ab137fd5ad7..edff4347735c18 100644 --- a/docs/src/pages/guides/testing/testing-zh.md +++ b/docs/src/pages/guides/testing/testing-zh.md @@ -6,7 +6,7 @@ ## 内部 -Material-UI has a wide **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md). +Material-UI has **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md). ## 用户空间 diff --git a/docs/src/pages/styles/api/api-aa.md b/docs/src/pages/styles/api/api-aa.md index 68b5702068d113..76e479efd1f085 100644 --- a/docs/src/pages/styles/api/api-aa.md +++ b/docs/src/pages/styles/api/api-aa.md @@ -52,7 +52,7 @@ crwdns97292:0crwdne97292:0 1. crwdns97296:0crwdne97296:0 crwdns97298:0crwdne97298:0 crwdns97300:0crwdne97300:0 crwdns97302:0crwdne97302:0 2. crwdns97304:0[optional]crwdne97304:0 - crwdns97306:0[optional]crwdne97306:0 - - crwdns97308:0[optional]crwdne97308:0 crwdns97310:0crwdne97310:0 crwdns97312:0crwdne97312:0 + - crwdns97308:0[optional]crwdne97308:0 crwdns97310:0crwdne97310:0 - crwdns97314:0[optional]crwdne97314:0 crwdns97316:0crwdne97316:0 crwdns97318:0crwdne97318:0 - crwdns97320:0[styles]crwdnd97320:0[options]crwdne97320:0 diff --git a/docs/src/pages/styles/api/api-de.md b/docs/src/pages/styles/api/api-de.md index b3916ef94debfa..0e6dc9c2da48f3 100644 --- a/docs/src/pages/styles/api/api-de.md +++ b/docs/src/pages/styles/api/api-de.md @@ -72,7 +72,7 @@ Verknüpfen Sie ein Stylesheet mit einer Funktionskomponente mit dem **Hook** Mu 1. `styles` (* Function | Object *): Eine Funktion, die die Stile oder ein Stilobjekt generiert. Es wird mit der Komponente verknüpft. Verwenden Sie die Funktionssignatur, wenn Sie Zugriff auf das Theme benötigen. Es ist das erste Argument. 2. `options` (*Object* [optional]): - `options.defaultTheme` (*Object* [optional]): Das Standarddesign, das verwendet werden soll, wenn ein Theme nicht über einen Theme Provider bereitgestellt wird. - - `options.name` (*String* [optional]): Der Name des Stylesheets. Nützlich zum Debuggen. Wenn der Wert nicht angegeben wird, wird versucht, auf den Namen der Komponente zurückzugreifen. + - `options.name` (*String* [optional]): Der Name des Stylesheets. Nützlich zum Debuggen. - `options.flip` (*Boolean* [optional]): Wenn auf `false` gestellt, wird die `Rechts-Nach-Links` Transformation deaktiviert. Wenn es `true` ist sind die Stile invertiert. Wenn es `null` ist, folgt es der `theme.direction` Einstellung. - Die anderen Schlüssel werden an das Optionsargument [jss.createStyleSheet([styles], [options])](https://cssinjs.org/jss-api/#create-style-sheet) weitergeleitet. diff --git a/docs/src/pages/styles/api/api-es.md b/docs/src/pages/styles/api/api-es.md index 2c0b78b0bd1baf..fff87d5679165f 100644 --- a/docs/src/pages/styles/api/api-es.md +++ b/docs/src/pages/styles/api/api-es.md @@ -72,7 +72,7 @@ Link a style sheet with a function component using the **hook** pattern. 1. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument. 2. `options` (*Object* [optional]): - `options.defaultTheme` (*Object* [optional]): The default theme to use if a theme isn't supplied through a Theme Provider. - - `options.name` (*String* [optional]): The name of the style sheet. Useful for debugging. If the value isn't provided, it will try to fallback to the name of the component. + - `options.name` (*String* [optional]): The name of the style sheet. Useful for debugging. - `options.flip` (*Boolean* [optional]): When set to `false`, this sheet will opt-out the `rtl` transformation. When set to `true`, the styles are inversed. When set to `null`, it follows `theme.direction`. - The other keys are forwarded to the options argument of [jss.createStyleSheet([styles], [options])](https://cssinjs.org/jss-api/#create-style-sheet). diff --git a/docs/src/pages/styles/api/api-fr.md b/docs/src/pages/styles/api/api-fr.md index ac5be57dc6b6c5..1cc4c8fbf7b212 100644 --- a/docs/src/pages/styles/api/api-fr.md +++ b/docs/src/pages/styles/api/api-fr.md @@ -72,7 +72,7 @@ Link a style sheet with a function component using the **hook** pattern. 1. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument. 2. `options` (*Object* [optional]): - `options.defaultTheme` (*Object* [optional]): The default theme to use if a theme isn't supplied through a Theme Provider. - - `options.name` (*String* [optional]): The name of the style sheet. Useful for debugging. If the value isn't provided, it will try to fallback to the name of the component. + - `options.name` (*String* [optional]): The name of the style sheet. Useful for debugging. - `options.flip` (*Boolean* [optional]): When set to `false`, this sheet will opt-out the `rtl` transformation. When set to `true`, the styles are inversed. When set to `null`, it follows `theme.direction`. - The other keys are forwarded to the options argument of [jss.createStyleSheet([styles], [options])](https://cssinjs.org/jss-api/#create-style-sheet). diff --git a/docs/src/pages/styles/api/api-ja.md b/docs/src/pages/styles/api/api-ja.md index a281da6950267a..7b47840327f865 100644 --- a/docs/src/pages/styles/api/api-ja.md +++ b/docs/src/pages/styles/api/api-ja.md @@ -72,7 +72,7 @@ Link a style sheet with a function component using the **hook** pattern. 1. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument. 2. `オプション` (*オプジェクト* [任意]): - `options.defaultTheme` (*Object* [optional]): The default theme to use if a theme isn't supplied through a Theme Provider. - - `options.name` (*String* [optional]): The name of the style sheet. Useful for debugging. If the value isn't provided, it will try to fallback to the name of the component. + - `options.name` (*String* [optional]): The name of the style sheet. Useful for debugging. - `options.flip` (*Boolean* [optional]): When set to `false`, this sheet will opt-out the `rtl` transformation. When set to `true`, the styles are inversed. When set to `null`, it follows `theme.direction`. - The other keys are forwarded to the options argument of [jss.createStyleSheet([styles], [options])](https://cssinjs.org/jss-api/#create-style-sheet). diff --git a/docs/src/pages/styles/api/api-pt.md b/docs/src/pages/styles/api/api-pt.md index 4befeee055ad95..02bf28e4aa8519 100644 --- a/docs/src/pages/styles/api/api-pt.md +++ b/docs/src/pages/styles/api/api-pt.md @@ -72,7 +72,7 @@ Vincula uma folha de estilo a um componente de função usando o padrão **hook* 1. `styles` (*Function | Object*): Uma função que gera os estilos ou um objeto de estilos. Ela será vinculada ao componente. Use a assinatura da função se você precisar ter acesso ao tema. É fornecido como o primeiro argumento. 2. `options` (*Object* [opcional]): - `options.defaultTheme` (*Object* [opcional]): O tema padrão a ser usado se um tema não for fornecido por meio de um provedor de temas. - - `options.name` (*String* [opcional]): O nome da folha de estilo. Útil para depuração. Se o valor não for fornecido, ele tentará usar o nome do componente. + - `options.name` (*String* [opcional]): O nome da folha de estilo. Útil para depuração. - `options.flip` (*Boolean* [opcional]): Quando definido como `false`, está folha irá cancelar a transformação `rtl`. Quando definido para `true`, os estilos são invertidos. Quando definido para `null`, segue `theme.direction`. - As outras chaves são encaminhadas para o argumento de opções do [jss.createStyleSheet ([styles], [options])](https://cssinjs.org/jss-api/#create-style-sheet). diff --git a/docs/src/pages/styles/api/api-ru.md b/docs/src/pages/styles/api/api-ru.md index d59f0fea2b21b3..f010f3407f2856 100644 --- a/docs/src/pages/styles/api/api-ru.md +++ b/docs/src/pages/styles/api/api-ru.md @@ -72,7 +72,7 @@ Link a style sheet with a function component using the **hook** pattern. 1. `styles` (*Function | Object*): A function generating the styles or a styles object. Это будет связано с компонентом. Use the function signature if you need to have access to the theme. It's provided as the first argument. 2. `варианты` (*объекта* [optional]): - `options.defaultTheme` (*Object* [optional]): The default theme to use if a theme isn't supplied through a Theme Provider. - - `options.name` (*String* [optional]): The name of the style sheet. Полезно для отладки. If the value isn't provided, it will try to fallback to the name of the component. + - `options.name` (*String* [optional]): The name of the style sheet. Полезно для отладки. - `options.flip` (*Boolean* [optional]): When set to `false`, this sheet will opt-out the `rtl` transformation. When set to `true`, the styles are inversed. When set to `null`, it follows `theme.direction`. - The other keys are forwarded to the options argument of [jss.createStyleSheet([styles], [options])](https://cssinjs.org/jss-api/#create-style-sheet). diff --git a/docs/src/pages/styles/api/api-zh.md b/docs/src/pages/styles/api/api-zh.md index 7a624f6360c27c..56ae132bf20842 100644 --- a/docs/src/pages/styles/api/api-zh.md +++ b/docs/src/pages/styles/api/api-zh.md @@ -72,7 +72,7 @@ export default function MyComponent { 1. ` styles `(* Function | Object *): 生成样式或样式对象的函数。 它将链接到组件。 如果需要访问主题, 请使用函数签名。 它作为第一个参数提供。 2. `options` (*Object* [optional]): - `options.defaultTheme`（*Object* [optional]）：如果未通过主题提供者提供主题，则使用默认主题。 - - ` options.name ` (*String* [optional]): 样式表的名称。 用于调试。 如果未提供该值, 它将尝试回退到组件的名称。 + - ` options.name ` (*String* [optional]): 样式表的名称。 用于调试。 - `options.flip` (*Boolean* [optional])：当设置为 `false` 时, 此工作表将选择退出 ` rtl ` 转换。 如果设置为 ` true `, 则会反转样式。 当设置为`null`，它跟随`theme.direction`。 - 其他键被转发到[jss.createStyleSheet([styles], [options])](https://cssinjs.org/jss-api/#create-style-sheet)。 diff --git a/docs/src/pages/styles/basics/basics-de.md b/docs/src/pages/styles/basics/basics-de.md index 385ee6a52e23cb..0a6632905e272e 100644 --- a/docs/src/pages/styles/basics/basics-de.md +++ b/docs/src/pages/styles/basics/basics-de.md @@ -6,7 +6,7 @@ Material-UI hat das Ziel, solide Grundlagen für dynamische UIs zu schaffen. Der ## Wieso die Styling-Lösung von Material-UI benutzten? -In früheren Versionen hat Material-UI LESS verwendet, eine benutzerdefinierte Inline-Lösung zum Schreiben der Stile der Komponenten. Diese Ansätze erwiesen sich jedoch als begrenzt Einsetzbar. [A *CSS-in-JS* solution](https://github.com/oliviertassinari/a-journey-toward-better-style) overcomes many of those limitations, and **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.). +In früheren Versionen hat Material-UI LESS verwendet, eine benutzerdefinierte Inline-Lösung zum Schreiben der Stile der Komponenten. Diese Ansätze erwiesen sich jedoch als begrenzt Einsetzbar. [Eine *CSS-in-JS* Lösung](https://github.com/oliviertassinari/a-journey-toward-better-style) überwindet viele dieser Einschränkungen, und **schaltet viele großartige Funktionen frei** (Theme-Verschachtelung, dynamische Stile, Selbsthilfe, etc.). Die Styling-Lösung von Material-UI ist von vielen anderen Styling-Bibliotheken wie [styled-components](https://www.styled-components.com/) und [emotion](https://emotion.sh/) inspiriert. @@ -18,7 +18,7 @@ Die Styling-Lösung von Material-UI ist von vielen anderen Styling-Bibliotheken ## Installation -> `@material-ui/styles` is re-exported as `@material-ui/core/styles` - you only need to install it if you wish to use it independently from Material-UI. +> `@material-ui/styles` wird erneut exportiert als `@material-ui/core/styles` - Sie müssen es nur installieren, wenn Sie es unabhängig von Material-UI verwenden möchten. Um die Abhängigkeit zu ihrer `package.json` hinzuzufügen, führen Sie folgenden Befehl aus: @@ -32,7 +32,7 @@ yarn add @material-ui/styles ## Erste Schritte -There are 3 possible APIs you can use to generate and apply styles, however they all share the same underlying logic. +Es gibt 3 mögliche APIs, die Sie verwenden können, um Stile zu generieren und anzuwenden, aber sie alle teilen die gleiche zugrunde liegende Logik. ### Hook API @@ -198,11 +198,11 @@ const useStyles = makeStyles(theme => ({ ## @material-ui/core/styles vs @material-ui/styles -Material-UI's styles are powered by the [@material-ui/styles](https://www.npmjs.com/package/@material-ui/styles) package, (built with JSS). This solution is [isolated](https://bundlephobia.com/result?p=@material-ui/styles). It doesn't have a default theme, and can be used to style React applications that are not using Material-UI components. +Material-UI's styles are powered by the [@material-ui/styles](https://www.npmjs.com/package/@material-ui/styles) package, (built with JSS). This solution is [isolated](https://bundlephobia.com/result?p=@material-ui/styles). Es hat kein Standard-Theme und kann verwendet werden, um React-Anwendungen zu entwerfen, die keine Material-UI-Komponenten verwenden. -To reduce the number of packages to install when using Material-UI, and to simplify the imports, `@material-ui/styles` modules are re-exported from `@material-ui/core/styles`. +Um die Anzahl der zu installierenden Pakete zu reduzieren und um die Importe zu vereinfachen, werden `@material-ui/styles` Module von `@material-ui/core/styles` erneut exportiert. -To remove the need to systematically supply a theme, the default Material-UI theme is applied to the re-exported `makeStyles`, `styled`, `withTheme`, `useTheme`, and `withStyles` modules. +Um die Notwendigkeit einer systematischen Bereitstellung eines Themes zu entfernen, wird das Standard-Material-UI-Theme auf die neu exportierten `makeStyles`, `styled`, `withTheme`, `useTheme`, und `withStyles` Module angewendet. Zum Beispiel: diff --git a/docs/src/pages/styles/basics/basics-ru.md b/docs/src/pages/styles/basics/basics-ru.md index 1a59a6b79a3556..64d3fe9001a631 100644 --- a/docs/src/pages/styles/basics/basics-ru.md +++ b/docs/src/pages/styles/basics/basics-ru.md @@ -204,7 +204,7 @@ Material-UI's styles are powered by the [@material-ui/styles](https://www.npmjs. Чтобы устранить необходимость постоянного подключения темы, к реэкспортированным модулям применяется дефолтная тема Material-UI. Это относится к модулям: `makeStyles`, `styled`, `withTheme`, `useTheme` и `withStyles` -For instance: +Например: ```js // Re-export with a default theme diff --git a/docs/src/pages/system/palette/palette-aa.md b/docs/src/pages/system/palette/palette-aa.md index ba25b3853e0d60..a701c910703f33 100644 --- a/docs/src/pages/system/palette/palette-aa.md +++ b/docs/src/pages/system/palette/palette-aa.md @@ -7,7 +7,7 @@ crwdns104310:0crwdne104310:0 ```jsx -crwdns107129:0crwdne107129:0 +crwdns107923:0crwdne107923:0 ``` ## crwdns99136:0crwdne99136:0 @@ -15,7 +15,7 @@ crwdns107129:0crwdne107129:0 crwdns104312:0crwdne104312:0 ```jsx -crwdns107131:0crwdne107131:0 +crwdns107925:0crwdne107925:0 ``` ## crwdns99142:0crwdne99142:0 diff --git a/docs/src/pages/system/palette/palette-de.md b/docs/src/pages/system/palette/palette-de.md index d63b93fa74c88d..1394742ee911d3 100644 --- a/docs/src/pages/system/palette/palette-de.md +++ b/docs/src/pages/system/palette/palette-de.md @@ -16,7 +16,6 @@ … … … -… ``` ## Hintergrundfarbe @@ -33,7 +32,6 @@ … … … -… ``` ## API diff --git a/docs/src/pages/system/palette/palette-es.md b/docs/src/pages/system/palette/palette-es.md index 52811366825944..be14c86fb85944 100644 --- a/docs/src/pages/system/palette/palette-es.md +++ b/docs/src/pages/system/palette/palette-es.md @@ -16,7 +16,6 @@ … … … -… ``` ## Background color @@ -33,7 +32,6 @@ … … … -… ``` ## API diff --git a/docs/src/pages/system/palette/palette-fr.md b/docs/src/pages/system/palette/palette-fr.md index 42b1c6ed3c00e5..0099133584aafe 100644 --- a/docs/src/pages/system/palette/palette-fr.md +++ b/docs/src/pages/system/palette/palette-fr.md @@ -16,7 +16,6 @@ … … … -… ``` ## Background color @@ -33,7 +32,6 @@ … … … -… ``` ## API diff --git a/docs/src/pages/system/palette/palette-ja.md b/docs/src/pages/system/palette/palette-ja.md index 230c9833007af7..51c3973bb63c40 100644 --- a/docs/src/pages/system/palette/palette-ja.md +++ b/docs/src/pages/system/palette/palette-ja.md @@ -16,7 +16,6 @@ … … … -… ``` ## Background color @@ -33,7 +32,6 @@ … … … -… ``` ## API diff --git a/docs/src/pages/system/palette/palette-pt.md b/docs/src/pages/system/palette/palette-pt.md index 55d4ca284fc8da..312d4add10802e 100644 --- a/docs/src/pages/system/palette/palette-pt.md +++ b/docs/src/pages/system/palette/palette-pt.md @@ -16,7 +16,6 @@ … … … -… ``` ## Cor de fundo @@ -33,7 +32,6 @@ … … … -… ``` ## API diff --git a/docs/src/pages/system/palette/palette-ru.md b/docs/src/pages/system/palette/palette-ru.md index 02f114289319e4..39b47ca464191f 100644 --- a/docs/src/pages/system/palette/palette-ru.md +++ b/docs/src/pages/system/palette/palette-ru.md @@ -16,7 +16,6 @@ … … … -… ``` ## Background color @@ -33,7 +32,6 @@ … … … -… ``` ## API diff --git a/docs/src/pages/system/palette/palette-zh.md b/docs/src/pages/system/palette/palette-zh.md index 3d23919cb1eb23..1469b606a7e2e3 100644 --- a/docs/src/pages/system/palette/palette-zh.md +++ b/docs/src/pages/system/palette/palette-zh.md @@ -16,7 +16,6 @@ … … … -… ``` ## 背景颜色 @@ -33,7 +32,6 @@ … … … -… ``` ## API diff --git a/docs/src/pages/system/spacing/spacing-de.md b/docs/src/pages/system/spacing/spacing-de.md index 58e678f60d2082..ff529151b02031 100644 --- a/docs/src/pages/system/spacing/spacing-de.md +++ b/docs/src/pages/system/spacing/spacing-de.md @@ -110,7 +110,7 @@ import { spacing } from '@material-ui/system'; | `spacing` | `py` | `padding-top`, `padding-bottom` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | -*Some people find the prop shorthand confusing, you can use the full version if you prefer:* +*Einige Leute finden die Prop Kurzform verwirrend, Sie können die vollständige Version verwenden, wenn Sie sie bevorzugen:* ```diff - diff --git a/docs/src/pages/system/typography/typography-de.md b/docs/src/pages/system/typography/typography-de.md index 0a9d4ed59b8f42..6c4d3515b06c6a 100644 --- a/docs/src/pages/system/typography/typography-de.md +++ b/docs/src/pages/system/typography/typography-de.md @@ -53,7 +53,7 @@ … ``` -## Letter Spacing +## Zeichenabstand {{"demo": "pages/system/typography/LetterSpacing.js", "defaultCodeOpen": false}} @@ -62,7 +62,7 @@ … ``` -## Line Height +## Zeilenhöhe {{"demo": "pages/system/typography/LineHeight.js", "defaultCodeOpen": false}} diff --git a/docs/src/pages/versions/versions-aa.md b/docs/src/pages/versions/versions-aa.md index aa53869c528c36..2381f01e8ea9b7 100644 --- a/docs/src/pages/versions/versions-aa.md +++ b/docs/src/pages/versions/versions-aa.md @@ -41,7 +41,7 @@ crwdns99764:0crwdne99764:0 | crwdns99776:0crwdne99776:0 | crwdns99778:0crwdne99778:0 | crwdns102708:0crwdne102708:0 | |:---------------------------- |:---------------------------- |:---------------------------- | | crwdns102710:0crwdne102710:0 | crwdns102712:0crwdne102712:0 | crwdns102714:0crwdne102714:0 | -| crwdns102716:0crwdne102716:0 | crwdns102718:0crwdne102718:0 | crwdns102720:0crwdne102720:0 | +| crwdns108773:0crwdne108773:0 | crwdns102718:0crwdne102718:0 | crwdns102720:0crwdne102720:0 | | crwdns102722:0crwdne102722:0 | crwdns102724:0crwdne102724:0 | crwdns102726:0crwdne102726:0 | | crwdns103638:0crwdne103638:0 | crwdns102730:0crwdne102730:0 | crwdns102732:0crwdne102732:0 | diff --git a/docs/src/pages/versions/versions-de.md b/docs/src/pages/versions/versions-de.md index c217e144e7d876..c51f4286335bcd 100644 --- a/docs/src/pages/versions/versions-de.md +++ b/docs/src/pages/versions/versions-de.md @@ -28,7 +28,7 @@ Material-UI follows [Semantic Versioning 2.0.0](https://semver.org/). Die Versio ## Release-Frequenz -A regular schedule of releases helps you plan and coordinate your updates with the continuing evolution of Material-UI. +Ein regelmäßiger Release-Zeitplan hilft Ihnen, Ihre Updates mit der Weiterentwicklung von Material-UI zu planen und zu koordinieren. Im Allgemeinen können Sie den folgenden Release-Zyklus erwarten: @@ -38,12 +38,12 @@ Im Allgemeinen können Sie den folgenden Release-Zyklus erwarten: ## Release Zeitplan -| Datum | Version | Status | -|:-------------- |:------- |:-------- | -| May 2018 | v1.0.0 | Released | -| Septembre 2018 | v3.0.0 | Released | -| May 2019 | v4.0.0 | Released | -| Q3 2020 | v5.0.0 | ⏳ | +| Datum | Version | Status | +|:-------------- |:------- |:-------------- | +| May 2018 | v1.0.0 | Veröffentlicht | +| September 2018 | v3.0.0 | Veröffentlicht | +| May 2019 | v4.0.0 | Veröffentlicht | +| Q3 2020 | v5.0.0 | ⏳ | You can follow the [milestones](https://github.com/mui-org/material-ui/milestones) for a more detailed overview. @@ -58,7 +58,7 @@ Find details on the [supported versions](/getting-started/support/#supported-ver Manchmal sind **"breaking changes"** wie das Entfernen der Unterstützung für ausgewählte APIs und Features erforderlich. -To make these transitions as easy as possible: +Um diese Übergänge so einfach wie möglich zu machen: - The number of breaking changes is minimized, and migration tools provided when possible. - The deprecation policy described below is followed, so that you have time to update your apps to the latest APIs and best practices. diff --git a/docs/src/pages/versions/versions-es.md b/docs/src/pages/versions/versions-es.md index 15ef3f6c2030df..26ca14b867c5ab 100644 --- a/docs/src/pages/versions/versions-es.md +++ b/docs/src/pages/versions/versions-es.md @@ -41,7 +41,7 @@ En general, espera el siguiente ciclo de lanzamiento: | Fecha | Versión | Status | |:-------------- |:------- |:-------- | | May 2018 | v1.0.0 | Released | -| Septembre 2018 | v3.0.0 | Released | +| September 2018 | v3.0.0 | Released | | May 2019 | v4.0.0 | Released | | Q3 2020 | v5.0.0 | ⏳ | diff --git a/docs/src/pages/versions/versions-fr.md b/docs/src/pages/versions/versions-fr.md index 0aad83d32e7d16..5979905383c0da 100644 --- a/docs/src/pages/versions/versions-fr.md +++ b/docs/src/pages/versions/versions-fr.md @@ -41,7 +41,7 @@ In general, you can expect the following release cycle: | Date | Version | Status | |:-------------- |:------- |:-------- | | May 2018 | v1.0.0 | Released | -| Septembre 2018 | v3.0.0 | Released | +| September 2018 | v3.0.0 | Released | | May 2019 | v4.0.0 | Released | | Q3 2020 | v5.0.0 | ⏳ | diff --git a/docs/src/pages/versions/versions-ja.md b/docs/src/pages/versions/versions-ja.md index 31c5617a171cfd..adf74b364428ef 100644 --- a/docs/src/pages/versions/versions-ja.md +++ b/docs/src/pages/versions/versions-ja.md @@ -41,7 +41,7 @@ Material-UI follows [Semantic Versioning 2.0.0](https://semver.org/). Material-U | Date | Version | Status | |:-------------- |:------- |:-------- | | May 2018 | v1.0.0 | Released | -| Septembre 2018 | v3.0.0 | Released | +| September 2018 | v3.0.0 | Released | | May 2019 | v4.0.0 | Released | | Q3 2020 | v5.0.0 | ⏳ | diff --git a/docs/src/pages/versions/versions-pt.md b/docs/src/pages/versions/versions-pt.md index c7272cc70bf723..263b5ae70e5f19 100644 --- a/docs/src/pages/versions/versions-pt.md +++ b/docs/src/pages/versions/versions-pt.md @@ -1,10 +1,10 @@ -# Versões de Material-UI +# Versões do Material-UI -

Pode, em qualquer altura, voltar a esta pagina e selecionar outra versāo da documentaçāo que esta lendo.

+

Você pode voltar a esta página e mudar a qualquer momento a versão da documentação que você está lendo.

-## Versão estavél +## Versão estável -É recomendado usar a versāo mais recente em ambiente de produção. +É recomendado usar a versão mais recente em ambiente de produção. {{"demo": "pages/versions/StableVersions.js", "hideHeader": true, "bg": "inline"}} @@ -18,9 +18,9 @@ Aqui pode encontrar a versão em desenvolvimento e sua documentação. Poderá u A estabilidade garante que componentes e bibliotecas reutilizáveis, tutoriais, ferramentas e práticas aprendidas não se tornem obsoletos inesperadamente. A estabilidade é essencial para que o ecossistema em torno da Material-UI prospere. -This document contains the practices that are followed to provide you with a leading-edge UI library, balanced with stability, ensuring that future changes are always introduced in a predictable way. +Este documento contém as práticas que são seguidas para fornecer uma biblioteca de ponta para interface do usuário, equilibrada com a estabilidade e garantindo que mudanças futuras sejam sempre introduzidas de maneira previsível. -Material-UI follows [Semantic Versioning 2.0.0](https://semver.org/). Os números de versão do material-UI têm três partes: ` major.minor.patch `. O número da versão é incrementado com base no nível de alteração incluído na nova versão. +Material-UI segue o [Controle de Versão Semântico 2.0.0](https://semver.org/). Os números de versão do material-UI têm três partes: ` major.minor.patch `. O número da versão é incrementado com base no nível de alteração incluído na nova versão. - ** versões principais ** contém novos recursos significativos, alguma assistência, mas mínima, do desenvolvedor é esperada durante a atualização. Ao atualizar para uma nova versão principal, talvez seja necessário executar scripts de atualização, refatorar códigos, executar testes adicionais e aprender novas APIs. - **versões Menores** contém novos recursos importantes. Versões menores são totalmente compatíveis com versões anteriores; nenhuma assistência do desenvolvedor é esperada durante a atualização, mas você pode opcionalmente modificar seus aplicativos e bibliotecas para começar a usar novas APIs, recursos e recursos que foram adicionados na versão. @@ -38,17 +38,17 @@ Em geral, você pode esperar o seguinte ciclo de lançamento: ## Cronograma de lançamento -| Data | Versão | Situação | -|:---------------- |:------ |:-------- | -| Maio de 2018 | v1.0.0 | Liberada | -| Setembro de 2018 | v3.0.0 | Liberada | -| Maio de 2019 | v4.0.0 | Liberada | -| Q3 2020 | v5.0.0 | ⏳ | +| Data | Versão | Situação | +|:-------------------------- |:------ |:-------- | +| Maio de 2018 | v1.0.0 | Liberada | +| September 2018 | v3.0.0 | Liberada | +| Maio de 2019 | v4.0.0 | Liberada | +| Terceiro trimestre de 2020 | v5.0.0 | ⏳ | -You can follow the [milestones](https://github.com/mui-org/material-ui/milestones) for a more detailed overview. +Você pode seguir os [ milestones ](https://github.com/mui-org/material-ui/milestones) para uma visão geral mais detalhada. -> ⚠️ **Disclaimer**: We operate in a dynamic environment, and things are subject to change. The information provided is intended to outline the general framework direction. It's intended for informational purposes only. We may decide to add/remove new items at any time depending on our capability to deliver while meeting our quality standards. The development, releases and timing of any features or functionality of Material-UI remains at the sole discretion of Material-UI. The roadmap does not represent a commitment, obligation or promise to deliver at any time. +> ⚠️ ** Isenção de responsabilidade **: Operamos em um ambiente dinâmico e as coisas estão sujeitas a alterações. The information provided is intended to outline the general framework direction. It's intended for informational purposes only. We may decide to add/remove new items at any time depending on our capability to deliver while meeting our quality standards. The development, releases and timing of any features or functionality of Material-UI remains at the sole discretion of Material-UI. The roadmap does not represent a commitment, obligation or promise to deliver at any time. ## Política de suporte diff --git a/docs/src/pages/versions/versions-ru.md b/docs/src/pages/versions/versions-ru.md index 0f12063936052c..c00f32dba0336c 100644 --- a/docs/src/pages/versions/versions-ru.md +++ b/docs/src/pages/versions/versions-ru.md @@ -41,7 +41,7 @@ In general, you can expect the following release cycle: | Date | Version | Status | |:-------------- |:------- |:-------- | | May 2018 | v1.0.0 | Released | -| Septembre 2018 | v3.0.0 | Released | +| September 2018 | v3.0.0 | Released | | May 2019 | v4.0.0 | Released | | Q3 2020 | v5.0.0 | ⏳ | diff --git a/docs/src/pages/versions/versions-zh.md b/docs/src/pages/versions/versions-zh.md index 4ee93c8a3d54ad..7333c2d6da2ff4 100644 --- a/docs/src/pages/versions/versions-zh.md +++ b/docs/src/pages/versions/versions-zh.md @@ -38,12 +38,12 @@ Material-UI遵循[语义化版本2.0.0](https://semver.org/)。 Material-UI 的 ## 发布时间表 -| 日期 | 版本 | 状态 | -|:-------- |:------ |:--- | -| 2018年5月 | v1.0.0 | 已发布 | -| 2018年9月 | v3.0.0 | 已发布 | -| 2019年5月 | v4.0.0 | 已发布 | -| 2020第三季度 | v5.0.0 | ⏳ | +| 日期 | 版本 | 状态 | +|:-------------- |:------ |:--- | +| 2018年5月 | v1.0.0 | 已发布 | +| September 2018 | v3.0.0 | 已发布 | +| 2019年5月 | v4.0.0 | 已发布 | +| 2020第三季度 | v5.0.0 | ⏳ | 您可以参考[里程碑](https://github.com/mui-org/material-ui/milestones)来获得更详细的概述。 diff --git a/docs/translations/translations-aa.json b/docs/translations/translations-aa.json index 3122e374ee69b3..cbca60e6e17df2 100644 --- a/docs/translations/translations-aa.json +++ b/docs/translations/translations-aa.json @@ -2,6 +2,7 @@ "homeQuickWord": "crwdns99822:0crwdne99822:0", "helpToTranslate": "crwdns100754:0crwdne100754:0", "editWebsiteColors": "crwdns99824:0crwdne99824:0", + "useDarkTheme": "crwdns107927:0crwdne107927:0", "toggleTheme": "crwdns103670:0crwdne103670:0", "toggleRTL": "crwdns103672:0crwdne103672:0", "github": "crwdns99830:0crwdne99830:0", @@ -16,12 +17,14 @@ "usageDescr": "crwdns99848:0crwdne99848:0", "usageButton": "crwdns99850:0crwdne99850:0", "themes": "crwdns99852:0crwdne99852:0", - "themesDescr": "crwdns99854:0crwdne99854:0", + "themesDescr": "crwdns108805:0crwdne108805:0", "themesButton": "crwdns99856:0crwdne99856:0", "whosUsing": "crwdns99858:0crwdne99858:0", "joinThese": "crwdns99860:0crwdne99860:0", "usingMui": "crwdns99862:0crwdne99862:0", "letUsKnow": "crwdns99864:0crwdne99864:0", + "praise": "crwdns108807:0crwdne108807:0", + "praiseDescr": "crwdns108809:0crwdne108809:0", "footerCommunity": "crwdns102246:0crwdne102246:0", "footerResources": "crwdns102248:0crwdne102248:0", "footerCompany": "crwdns107571:0crwdne107571:0", @@ -64,8 +67,10 @@ "codesandbox": "crwdns99944:0crwdne99944:0", "seeMore": "crwdns99946:0crwdne99946:0", "copySource": "crwdns99948:0crwdne99948:0", + "copiedSource": "crwdns107929:0crwdne107929:0", "copySourceLinkJS": "crwdns99950:0crwdne99950:0", "copySourceLinkTS": "crwdns99952:0crwdne99952:0", + "copiedSourceLink": "crwdns107931:0crwdne107931:0", "stackblitz": "crwdns99954:0crwdne99954:0", "headTitle": "crwdns99956:0crwdne99956:0", "emojiLove": "crwdns99958:0crwdne99958:0", @@ -223,4 +228,4 @@ "/components/tree-view": "crwdns100768:0crwdne100768:0", "/customization/density": "crwdns100770:0crwdne100770:0" } -} +} \ No newline at end of file diff --git a/docs/translations/translations-de.json b/docs/translations/translations-de.json index 737d6fd0d84d0f..f636e30f05d803 100644 --- a/docs/translations/translations-de.json +++ b/docs/translations/translations-de.json @@ -1,11 +1,12 @@ { "homeQuickWord": "Ein schnelles Wort von unseren Sponsoren:", - "helpToTranslate": "Help to translate", + "helpToTranslate": "Hilf beim Übersetzen", "editWebsiteColors": "Farbschema der Seite bearbeiten", + "useDarkTheme": "Dunkles Design verwenden", "toggleTheme": "helles/dunkles Thema umschalten", "toggleRTL": "rechtsläufig/linksläufig umschalten", "github": "GitHub-Repository", - "strapline": "React Komponenten für schnellere und einfachere Web-Entwicklung. Bauen SIe ihr eigenes Design-System oder starten Sie mit Material Design.", + "strapline": "React Komponenten für schnellere und einfachere Web-Entwicklung. Bauen Sie ihr eigenes Design-System oder starten Sie mit Material Design.", "getStarted": "Erste Schritte", "installation": "Installation", "installDescr": "Installieren sie Material-UI via npm. Wir kümmern uns um das benötigte CSS.", @@ -16,15 +17,17 @@ "usageDescr": "Material-UI Komponenten funktionieren ohne zusätzliche Einrichtung und verändern keine Variablen im globalen Sichtbarkeitsbereich.", "usageButton": "Erkunden Sie die Dokumentation", "themes": "Premium Themen", - "themesDescr": "Bringen Sie Material-UI auf die nächste Stufe mit Premium-Themen aus unserem offiziellen Marktplatz - alle basierend auf Material-UI.", + "themesDescr": "Take your project to the next level with premium themes from our official marketplace – all built on Material-UI.", "themesButton": "Themen durchsuchen", "whosUsing": "Wer nutzt Material-UI?", "joinThese": "Treten Sie dieser oder anderer großartiger Organisationen bei!", "usingMui": "Nutzen Sie Material-UI?", "letUsKnow": "Lassen Sie es uns wissen!", + "praise": "Praise for Material-UI", + "praiseDescr": "Here's what some of our users are saying.", "footerCommunity": "Gemeinschaft", "footerResources": "Ressourcen", - "footerCompany": "Company", + "footerCompany": "Unternehmen", "homeFooterRelease": "Aktuell {{versionNumber}}. Veröffentlicht unter der {{license}}.", "license": "MIT-Lizenz", "likeMui": "Gefällt ihnen Material-UI?", @@ -58,14 +61,16 @@ "expandAll": "Alles aufklappen", "showSource": "Quellcode anzeigen", "hideSource": "Quellcode verstecken", - "showFullSource": "Show the full source", - "hideFullSource": "Hide the full source", + "showFullSource": "Kompletten Quellcode anzeigen", + "hideFullSource": "Kompletten Quellcode verstecken", "viewGitHub": "Den Quellcode auf GitHub anzeigen", "codesandbox": "In CodeSandbox bearbeiten", "seeMore": "Mehr anzeigen", "copySource": "Quellcode kopieren", + "copiedSource": "Der Quellcode wurde kopiert.", "copySourceLinkJS": "Kopiere Link zum JavaScript Quellcode", "copySourceLinkTS": "Kopiere Link zum TypeScript Quellcode", + "copiedSourceLink": "Der Link zum Quellcode wurde kopiert.", "stackblitz": "In StackBlitz bearbeiten (nur JS)", "headTitle": "Material-UI: Ein beliebtes React UI Framework", "emojiLove": "Liebe", @@ -83,19 +88,19 @@ "resetDensity": "Dichte zurücksetzen", "increaseSpacing": "Abstand erhöhen", "decreaseSpacing": "Abstand verringern", - "getProfessionalSupport": "Get Professional Support", + "getProfessionalSupport": "Professionellen Support erhalten", "diamondSponsors": "Diamant-Sponsoren", "pages": { "/getting-started": "Erste Schritte", "/getting-started/installation": "Installation", "/getting-started/usage": "Nutzung", "/getting-started/example-projects": "Beispielprojekte", - "/getting-started/templates": "Templates", + "/getting-started/templates": "Vorlagen", "/getting-started/learn": "Lernen", "/getting-started/faq": "Häufige Fragen", "/getting-started/supported-components": "Unterstützte Komponenten", "/getting-started/supported-platforms": "Unterstützte Plattformen", - "/getting-started/support": "Support", + "/getting-started/support": "Unterstützung", "/components": "Komponenten", "/components/about-the-lab": "Über das Labor", "/components/click-away-listener": "Außerhalb Klick Ereignisbehandlungsroutine", @@ -152,7 +157,7 @@ "/components/switches": "Switch", "/components/tables": "Tabelle", "/components/tabs": "Tabs", - "/components/text-fields": "Text Field", + "/components/text-fields": "Textfeld", "/components/toggle-button": "Schalter", "/components/tooltips": "Tooltip", "/components/transfer-list": "Transferliste (Transfer List)", @@ -200,7 +205,7 @@ "/guides/testing": "Testen", "/guides/flow": "Flow", "/guides/right-to-left": "Rechts nach links", - "/guides/localization": "Localization", + "/guides/localization": "Lokalisierung", "/discover-more": "Mehr entdecken", "/discover-more/showcase": "Ausstellung", "/discover-more/related-projects": "Verwandte Projekte", @@ -218,9 +223,9 @@ "https://themes.material-ui.com/": "Premium-Themes", "/components/material-icons": "Material Icons", "/components/textarea-autosize": "Textarea Autosize", - "/components/rating": "Rating", - "/components/skeleton": "Skeleton", - "/components/tree-view": "Tree View", - "/customization/density": "Density" + "/components/rating": "Bewertung", + "/components/skeleton": "Skelett", + "/components/tree-view": "Baumstrukturansicht", + "/customization/density": "Dichte" } -} +} \ No newline at end of file diff --git a/docs/translations/translations-es.json b/docs/translations/translations-es.json index f9a18f6fb63e6b..39b3ece1567226 100644 --- a/docs/translations/translations-es.json +++ b/docs/translations/translations-es.json @@ -2,6 +2,7 @@ "homeQuickWord": "Unas palabras de nuestros patrocinadores:", "helpToTranslate": "Ayúdanos a traducir", "editWebsiteColors": "Editar los colores del sitio web", + "useDarkTheme": "Use dark theme", "toggleTheme": "Alternar tema claro/oscuro", "toggleRTL": "Alternar derecha-izquierda/izquierda-derecha", "github": "Repositorio en GitHub", @@ -16,12 +17,14 @@ "usageDescr": "Los componentes de Material-UI funcionan sin ninguna configuración adicional, y no ensucian el global scope.", "usageButton": "Explore la documentación", "themes": "Temas Premium", - "themesDescr": "Lleve Material-UI al siguiente nivel con los temas premium de nuestro marketplace oficial - todo hecho con Material-UI.", + "themesDescr": "Take your project to the next level with premium themes from our official marketplace – all built on Material-UI.", "themesButton": "Examinar temas", "whosUsing": "¿Quién usa Material-UI?", "joinThese": "¡Únete a estas y otras grandes organizaciones!", "usingMui": "¿Estás utilizando Material-UI?", "letUsKnow": "¡Déjanos saber!", + "praise": "Praise for Material-UI", + "praiseDescr": "Here's what some of our users are saying.", "footerCommunity": "Comunidad", "footerResources": "Recursos", "footerCompany": "Company", @@ -64,8 +67,10 @@ "codesandbox": "Editar en CodeSandbox", "seeMore": "Ver más", "copySource": "Copiar la fuente", + "copiedSource": "The source code has been copied.", "copySourceLinkJS": "Copiar enlace a fuente de JavaScript", "copySourceLinkTS": "Copy link to TypeScript source", + "copiedSourceLink": "Link to the source code has been copied.", "stackblitz": "Editar en StackBlitz (solo JS)", "headTitle": "Material-UI: A popular React UI framework", "emojiLove": "Amor", @@ -223,4 +228,4 @@ "/components/tree-view": "Vista de arbol", "/customization/density": "Density" } -} +} \ No newline at end of file diff --git a/docs/translations/translations-fr.json b/docs/translations/translations-fr.json index 79ad6c70e4d645..94f9efa9c2e168 100644 --- a/docs/translations/translations-fr.json +++ b/docs/translations/translations-fr.json @@ -2,6 +2,7 @@ "homeQuickWord": "Un mot rapide de nos sponsors :", "helpToTranslate": "Aider à la traduction", "editWebsiteColors": "Modifier les couleurs du site", + "useDarkTheme": "Use dark theme", "toggleTheme": "Basculer le thème de couleurs \"clair/sombre\"", "toggleRTL": "Basculer de droite à gauche / de gauche à droite", "github": "Répertoire GitHub", @@ -16,15 +17,17 @@ "usageDescr": "Les composants Material-UI fonctionnent de manière isolée. Ils sont autonomes.", "usageButton": "Consulter la documentation", "themes": "Thèmes Premium", - "themesDescr": "Faites passer Material-UI au niveau supérieur avec les thèmes premium de notre place de marché officiel, tous construits sur Material-UI.", + "themesDescr": "Take your project to the next level with premium themes from our official marketplace – all built on Material-UI.", "themesButton": "Parcourir les thèmes", "whosUsing": "Qui utilise Material-UI ?", "joinThese": "Rejoignez ces organisations et d’autres formidables!", "usingMui": "Utilisez-vous Material-UI ?", "letUsKnow": "Faites-nous savoir !", + "praise": "Praise for Material-UI", + "praiseDescr": "Here's what some of our users are saying.", "footerCommunity": "Communauté", "footerResources": "Ressources", - "footerCompany": "Company", + "footerCompany": "Entreprise", "homeFooterRelease": "Actuellement {{versionNumber}}. Délivrée sous la {{license}}.", "license": "Licence MIT", "likeMui": "Vous aimez Material-UI ?", @@ -64,8 +67,10 @@ "codesandbox": "Modifier dans CodeSandbox", "seeMore": "Voir plus", "copySource": "Copier la source", + "copiedSource": "The source code has been copied.", "copySourceLinkJS": "Copier le lien vers la source JavaScript", "copySourceLinkTS": "Copier le lien vers une source TypeScript", + "copiedSourceLink": "Link to the source code has been copied.", "stackblitz": "Modifier dans StackBlitz (JS uniquement)", "headTitle": "Material-UI : Un framework UI React populaire", "emojiLove": "Amour", @@ -83,8 +88,8 @@ "resetDensity": "Réinitialiser la densité", "increaseSpacing": "augmenter l'espacement", "decreaseSpacing": "diminuer l'espacement", - "getProfessionalSupport": "Get Professional Support", - "diamondSponsors": "Diamond Sponsors", + "getProfessionalSupport": "Obtenir de l'assistance professionnelle", + "diamondSponsors": "Sponsors Diamant", "pages": { "/getting-started": "Bien démarrer", "/getting-started/installation": "Installation", @@ -95,7 +100,7 @@ "/getting-started/faq": "FAQs", "/getting-started/supported-components": "Composants pris en charge", "/getting-started/supported-platforms": "Plateformes supportées", - "/getting-started/support": "Support", + "/getting-started/support": "Assistance", "/components": "Composants", "/components/about-the-lab": "À propos du Lab", "/components/click-away-listener": "Click Away Listener", @@ -143,11 +148,11 @@ "/components/progress": "Barres de progression", "/components/progress-validation": "Feedback", "/components/radio-buttons": "Radio", - "/components/selects": "Select", + "/components/selects": "Liste à choix simple", "/components/slider": "Slider", "/components/snackbars": "Snackbar (Message rapide)", "/components/speed-dial": "Speed Dial", - "/components/steppers": "Stepper", + "/components/steppers": "Étapes", "/components/surfaces": "Surfaces", "/components/switches": "Interrupteur (switch)", "/components/tables": "Table (Tableaux)", @@ -176,7 +181,7 @@ "/system/typography": "Typography (Typographie)", "/customization": "Personnalisation", "/customization/theming": "Thèmes", - "/customization/theme": "Theming", + "/customization/theme": "Thème", "/customization/breakpoints": "Breakpoints", "/customization/color": "Couleur", "/customization/palette": "Palette", @@ -200,7 +205,7 @@ "/guides/testing": "Test", "/guides/flow": "Flow", "/guides/right-to-left": "Droite à gauche", - "/guides/localization": "Localization", + "/guides/localization": "Localisation", "/discover-more": "Découvrir plus", "/discover-more/showcase": "Démonstration", "/discover-more/related-projects": "Projets liés", @@ -223,4 +228,4 @@ "/components/tree-view": "Tree View (Vue arborescente)", "/customization/density": "Densité" } -} +} \ No newline at end of file diff --git a/docs/translations/translations-ja.json b/docs/translations/translations-ja.json index 2890a9324e85a2..e505915de1f5e4 100644 --- a/docs/translations/translations-ja.json +++ b/docs/translations/translations-ja.json @@ -2,6 +2,7 @@ "homeQuickWord": "私たちのスポンサーからの言葉:", "helpToTranslate": "翻訳を手伝う", "editWebsiteColors": "ウェブサイトの色を編集する", + "useDarkTheme": "Use dark theme", "toggleTheme": "ライト/ダークテーマに変更する", "toggleRTL": "左右反転する", "github": "GitHubリポジトリ", @@ -16,12 +17,14 @@ "usageDescr": "Material-UIコンポーネントは追加の設定なしで機能し、グローバルスコープを汚染しません。", "usageButton": "ドキュメントを探索する", "themes": "プレミアムテーマ", - "themesDescr": "Material-UIだけで構築された公式マーケットプレイスのプレミアムテーマでMaterial-UIを次のレベルに進化させます。", + "themesDescr": "Take your project to the next level with premium themes from our official marketplace – all built on Material-UI.", "themesButton": "テーマを見る", "whosUsing": "誰がMaterial-UIを利用してますか？", "joinThese": "この素晴らしい団体に参加しましょう！", "usingMui": "Material-UIを使ってみませんか？", "letUsKnow": "ご連絡ください！", + "praise": "Praise for Material-UI", + "praiseDescr": "Here's what some of our users are saying.", "footerCommunity": "コミュニティ", "footerResources": "Resources", "footerCompany": "Company", @@ -64,8 +67,10 @@ "codesandbox": "CodeSandboxで編集する", "seeMore": "もっと見る", "copySource": "ソースコードをコピーする", + "copiedSource": "The source code has been copied.", "copySourceLinkJS": "JavaScriptソースへのリンクをコピーする", "copySourceLinkTS": "TypeScriptソースへのリンクをコピーする", + "copiedSourceLink": "Link to the source code has been copied.", "stackblitz": "StackBlitz(JS only) で編集する", "headTitle": "ポピュラーなReact UIフレームワーク", "emojiLove": "かしこ", @@ -223,4 +228,4 @@ "/components/tree-view": "ツリービュー (Tree View)", "/customization/density": "密度(Density)" } -} +} \ No newline at end of file diff --git a/docs/translations/translations-pt.json b/docs/translations/translations-pt.json index 7cc4fc42dbd560..87947dbea84c7d 100644 --- a/docs/translations/translations-pt.json +++ b/docs/translations/translations-pt.json @@ -2,6 +2,7 @@ "homeQuickWord": "Uma palavra rápida de nossos patrocinadores:", "helpToTranslate": "Ajude a traduzir", "editWebsiteColors": "Editar cores do site", + "useDarkTheme": "Use dark theme", "toggleTheme": "Alternar tema claro/escuro", "toggleRTL": "Alternar da direita para a esquerda/esquerda para a direita", "github": "Repositório no GitHub", @@ -16,15 +17,17 @@ "usageDescr": "Os componentes do Material-UI funcionam sem qualquer configuração adicional, e não poluem o escopo global.", "usageButton": "Explorar documentação", "themes": "Temas premium", - "themesDescr": "Leve o Material-UI para um novo patamar com temas sofisticados do nosso marketplace oficial. Todos construídos em Material-UI.", + "themesDescr": "Take your project to the next level with premium themes from our official marketplace – all built on Material-UI.", "themesButton": "Explorar temas", "whosUsing": "Quem tem usado Material-UI?", "joinThese": "Junte-se a estas e outras grandes organizações!", "usingMui": "Você está usando o Material-UI?", "letUsKnow": "Nos conte!", + "praise": "Praise for Material-UI", + "praiseDescr": "Here's what some of our users are saying.", "footerCommunity": "Comunidade", "footerResources": "Recursos", - "footerCompany": "Company", + "footerCompany": "Empresa", "homeFooterRelease": "Atualmente {{versionNumber}}. Lançado sob a {{license}}.", "license": "Licença MIT", "likeMui": "Gostou do Material-UI?", @@ -58,14 +61,16 @@ "expandAll": "Expandir tudo", "showSource": "Ver o código fonte", "hideSource": "Esconder o código fonte", - "showFullSource": "Show the full source", - "hideFullSource": "Hide the full source", + "showFullSource": "Ver o código fonte", + "hideFullSource": "Esconder o código fonte", "viewGitHub": "Visualizar o código fonte no GitHub", "codesandbox": "Edite em CodeSandbox", "seeMore": "Ver mais", "copySource": "Copiar código fonte", + "copiedSource": "The source code has been copied.", "copySourceLinkJS": "Copiar link para o fonte JavaScript", "copySourceLinkTS": "Copiar link para o fonte TypeScript", + "copiedSourceLink": "Link to the source code has been copied.", "stackblitz": "Editar em StackBlits (apenas JS)", "headTitle": "Material-UI: Um framework popular de React UI", "emojiLove": "Amor", @@ -83,7 +88,7 @@ "resetDensity": "Repor densidade", "increaseSpacing": "aumentar o espaçamento", "decreaseSpacing": "diminuir o espaçamento", - "getProfessionalSupport": "Get Professional Support", + "getProfessionalSupport": "Obtenha Suporte Profissional", "diamondSponsors": "Patrocinadores Diamante", "pages": { "/getting-started": "Comece a usar", @@ -142,8 +147,8 @@ "/components/portal": "Portal", "/components/progress": "Progresso", "/components/progress-validation": "Feedback", - "/components/radio-buttons": "Radio", - "/components/selects": "Select", + "/components/radio-buttons": "Botões de opção", + "/components/selects": "Seleção", "/components/slider": "Slider", "/components/snackbars": "Snackbar", "/components/speed-dial": "Discagem Rápida", @@ -200,7 +205,7 @@ "/guides/testing": "Testando", "/guides/flow": "Flow", "/guides/right-to-left": "Da Direita para Esquerda", - "/guides/localization": "Localization", + "/guides/localization": "Localização", "/discover-more": "Descubra mais", "/discover-more/showcase": "Demonstração", "/discover-more/related-projects": "Projetos Relacionados", @@ -223,4 +228,4 @@ "/components/tree-view": "Visualização em árvore", "/customization/density": "Densidade" } -} +} \ No newline at end of file diff --git a/docs/translations/translations-ru.json b/docs/translations/translations-ru.json index 82a5c51452d460..2666cee6686b86 100644 --- a/docs/translations/translations-ru.json +++ b/docs/translations/translations-ru.json @@ -2,6 +2,7 @@ "homeQuickWord": "Несколько слов от наших спонсоров:", "helpToTranslate": "Помогите нам с переводом", "editWebsiteColors": "Редактировать цветовую гамму сайта", + "useDarkTheme": "Use dark theme", "toggleTheme": "Переключить светлую/темную тему", "toggleRTL": "Переключить справа-налево/слева-направо", "github": "GitHub репозиторий", @@ -16,12 +17,14 @@ "usageDescr": "Компоненты Material-UI работают без какой-либо дополнительной настройки и не загрязняют глобальную область.", "usageButton": "Читать документацию", "themes": "Премиум темы", - "themesDescr": "Поднимите Material-UI на следующий уровень с премиум темами из нашего официального магазина - всё построено с использованием Material-UI.", + "themesDescr": "Take your project to the next level with premium themes from our official marketplace – all built on Material-UI.", "themesButton": "Смотреть темы", "whosUsing": "Кто использует Material-UI?", "joinThese": "Присоединяйтесь к этим и другим замечательным организациям!", "usingMui": "Используете ли вы Material-UI?", "letUsKnow": "Дайте нам знать!", + "praise": "Praise for Material-UI", + "praiseDescr": "Here's what some of our users are saying.", "footerCommunity": "Сообщество", "footerResources": "Ресурсы", "footerCompany": "Company", @@ -64,8 +67,10 @@ "codesandbox": "Редактировать в CodeSandbox", "seeMore": "Ещё", "copySource": "Копировать исходник", + "copiedSource": "The source code has been copied.", "copySourceLinkJS": "Скопировать ссылку на исходный код JavaScript", "copySourceLinkTS": "Скопировать ссылку на TypeScript источник", + "copiedSourceLink": "Link to the source code has been copied.", "stackblitz": "Редактировать в StackBlitz (только JS)", "headTitle": "Материал-интерфейс: популярный фреймворк React UI", "emojiLove": "Любовь", @@ -223,4 +228,4 @@ "/components/tree-view": "Иерархическое представление", "/customization/density": "Density" } -} +} \ No newline at end of file diff --git a/docs/translations/translations-zh.json b/docs/translations/translations-zh.json index 84d455af54b7cb..46a6a47f185e5a 100644 --- a/docs/translations/translations-zh.json +++ b/docs/translations/translations-zh.json @@ -2,6 +2,7 @@ "homeQuickWord": "来自我们的赞助商的一个简短概括：", "helpToTranslate": "帮助我们翻译", "editWebsiteColors": "编辑网站的颜色", + "useDarkTheme": "Use dark theme", "toggleTheme": "切换浅色/深色主题", "toggleRTL": "切换 从右到左/从左到右", "github": "GitHub 存储库", @@ -16,15 +17,17 @@ "usageDescr": "Material-UI 组件无需任何额外的设置即可使用, 并且不会污染全局范围。", "usageButton": "探索文档", "themes": "高级版主题", - "themesDescr": "使用我们官方市场中的高级主题将 Material-UI 升级到新的一层 - 所有这些都建立在 Material-UI 之上。", + "themesDescr": "Take your project to the next level with premium themes from our official marketplace – all built on Material-UI.", "themesButton": "浏览主题", "whosUsing": "有哪些人使用 Material-UI？", "joinThese": "请参与到这些或者其他强大的组织中去！", "usingMui": "你在使用 Material-UI 吗？", "letUsKnow": "请告诉我们吧！", + "praise": "Praise for Material-UI", + "praiseDescr": "Here's what some of our users are saying.", "footerCommunity": "社区", "footerResources": "资源", - "footerCompany": "Company", + "footerCompany": "企业", "homeFooterRelease": "当前 {{versionNumber}}. 根据 {{license}} 发布。", "license": "MIT 许可证", "likeMui": "帮助我们继续运行", @@ -64,8 +67,10 @@ "codesandbox": "在 CodeSandbox 中编辑", "seeMore": "查看更多", "copySource": "复制源代码", + "copiedSource": "The source code has been copied.", "copySourceLinkJS": "请将链接复制到 JavaScript 源代码", "copySourceLinkTS": "请将链接复制到 TypeScript 源代码", + "copiedSourceLink": "Link to the source code has been copied.", "stackblitz": "在 StackBlitz 中编辑（仅限JS）", "headTitle": "Material-UI：当下流行的 React UI 框架", "emojiLove": "喜爱", @@ -142,7 +147,7 @@ "/components/portal": "Portal（传送门）", "/components/progress": "Progress（进度条）", "/components/progress-validation": "用户反馈", - "/components/radio-buttons": "Radio", + "/components/radio-buttons": "单选按钮", "/components/selects": "Select（选择器）", "/components/slider": "Slider（滑块）", "/components/snackbars": "Snackbar（消息条）", @@ -223,4 +228,4 @@ "/components/tree-view": "树视图", "/customization/density": "间距 (density)" } -} +} \ No newline at end of file