Material-ui: Verwenden Sie gestylte Komponenten in allen Demos

@oliviertassinari what is the exactly the tasks in hand? @oliviertassinari was genau sind die aufgaben in der hand?

Here is what I understand, Hier ist, was ich verstehe,

1. Run the docs website Führen Sie die Docs-Website aus
2. Find all the example source code that uses material-ui/styles Finden Sie den gesamten Beispielquellcode, der material-ui/styles verwendet
3. Replace them with styled-components Ersetzen Sie sie durch styled-components

Is this correct? Ist das richtig?

@yordis I think that the timing is going to be key in this transition. @yordis Ich denke, dass das Timing bei diesem Übergang entscheidend sein wird. I would imagine the following steps: Ich könnte mir folgende Schritte vorstellen:

1. We replace the usage of @material-ui/styles in the demos with the Box component, where possible. Wir ersetzen die Verwendung von @material-ui/styles in den Demos nach Möglichkeit durch die Box-Komponente. Moving #16858 at the same time would help. Das gleichzeitige Verschieben von # 16858 würde helfen. This can be done in the near future. Dies kann in naher Zukunft erfolgen.
2. We solve #15561, we migrate more demos away from @material-ui/styles to use the system props. Wir lösen #15561, wir migrieren mehr Demos weg von @material-ui/styles, um die Systemprops zu verwenden. The sooner we solve this, the better. Je früher wir das lösen, desto besser.
3. We update the customization demos to use styled-components, leveraging the global Mui class names. Wir aktualisieren die Anpassungsdemos, um gestaltete Komponenten zu verwenden und die globalen Mui-Klassennamen zu nutzen. We might need to work on some helpers to make accessing the theme values easier. Möglicherweise müssen wir an einigen Helfern arbeiten, um den Zugriff auf die Themenwerte zu vereinfachen.
4. We solve #6115, we migrate the last usages of @material-ui/styles to styled-components. Wir lösen #6115, wir migrieren die letzten Verwendungen von @material-ui/styles zu styled-components. This is a task for v5, I think that we can start it Q1 2020 in the v5 alpha/beta versions. Dies ist eine Aufgabe für v5, ich denke, dass wir damit Q1 2020 in den v5 Alpha/Beta-Versionen beginnen können.

@oliviertassinari Ich bin neugierig und entschuldige mich, wenn dies wiederholt wurde: Warum nicht @material-ui/styles als Wrapper oder Abstraktion für styled-components ?

@ConAntonakos it's an option. @ConAntonakos es ist eine Option. It could help if we need to extend/normalize some of the features of styled-components. Es könnte hilfreich sein, wenn wir einige der Funktionen von styled-components erweitern/normalisieren müssen.

@oliviertassinari haben wir eine Liste mit dem, was noch übrig ist?

@yordis We haven't done many efforts in this direction yet. @yordis Wir haben noch nicht viele Anstrengungen in diese Richtung unternommen. However, there is a probability that it will require breaking changes, v5 is planned for around Q4 2020. I think that we should explore a partial deployment strategy for developers that want to leverage it sooner. Es besteht jedoch die Möglichkeit, dass Breaking Changes erforderlich sein werden, v5 ist für das vierte Quartal 2020 geplant. Ich denke, wir sollten eine partielle Bereitstellungsstrategie für Entwickler prüfen, die sie früher nutzen möchten. Now, this effort has to be balanced with the other priorities, like the support of new advanced components (free and paid) or the release of an unstyled version of the library to increase our audience reach (with different themes, eg iOS style). Nun muss diese Anstrengung mit den anderen Prioritäten wie der Unterstützung neuer erweiterter Komponenten (kostenlos und kostenpflichtig) oder der Veröffentlichung einer ungestylten Version der Bibliothek zur Steigerung unserer Publikumsreichweite (mit verschiedenen Themen, z. B. im iOS-Stil) ausbalanciert werden. The good news is that we will likely grow the team in the coming months, enabling us to move faster. Die gute Nachricht ist, dass wir das Team wahrscheinlich in den kommenden Monaten vergrößern werden, sodass wir schneller vorankommen können.

I imagine you are already using styled-components on top of Material-UI today as many other developers do (and not @material-ui/styles ). Ich kann mir vorstellen, dass Sie bereits heute styled-components auf Material-UI verwenden, wie es viele andere Entwickler tun (und nicht @material-ui/styles ). What are the top pain points you hope to address with this migration? Was sind die größten Schmerzpunkte, die Sie mit dieser Migration angehen möchten?

From a product perspective, our incentive is about: smaller bundle size, better performance, steaming support, fewer bugs, CSS template strings support, larger community, enables to use the system props in the core components, allow true dynamic themes and props support, better docs. Aus Produktsicht geht es bei unserem Anreiz um: kleinere Paketgröße, bessere Leistung, Dampfunterstützung, weniger Fehler, Unterstützung von CSS-Vorlagenzeichenfolgen, größere Community, ermöglicht die Verwendung der Systemprops in den Kernkomponenten, ermöglicht echte Unterstützung für dynamische Themen und Props, bessere Unterlagen.

However, there is a high probability that it will require breaking changes, Es besteht jedoch eine hohe Wahrscheinlichkeit, dass Breaking Changes erforderlich sind,

Yeah, I tried to change some examples, but they require some integration with the theme provider, so we may need to inject material/style theme provider and styled-component theme provider I am assuming. Ja, ich habe versucht, einige Beispiele zu ändern, aber sie erfordern eine gewisse Integration mit dem Themenanbieter, daher müssen wir möglicherweise material/style -Themenanbieter und styled-component -Themenanbieter einfügen, nehme ich an.

v5 is planned for around Q4 2020. v5 ist für etwa Q4 2020 geplant.

That is far enough, would it be better to pin different issues for visibility on what is a priority at the moment? Das ist weit genug, wäre es besser, verschiedene Themen für die Sichtbarkeit auf das festzulegen, was im Moment Priorität hat?

I imagine you are already using styled-components on top of Material-UI today as many other developers do (and not @material-ui/styles). Ich kann mir vorstellen, dass Sie bereits heute styled-components auf Material-UI verwenden, wie viele andere Entwickler (und nicht @material-ui/styles).

Actually, I am quite happy with @material-ui/styles and I am not using styled-components when I use Material UI (I would remove withStyles since I don't want to rely on programmer discipline 😉 , but I understand legacy software may no have hooks still )🤷‍♂️ Eigentlich bin ich ziemlich zufrieden mit @material-ui/styles und ich verwende nicht styled-components , wenn ich Material UI verwende (ich würde withStyles entfernen, da ich mich nicht auf die Disziplin der Programmierer verlassen möchte 😉 , aber ich verstehe, dass ältere Software möglicherweise noch keine Haken hat )🤷‍♂️

What are the top pain points you hope to address with this migration? Was sind die größten Schmerzpunkte, die Sie mit dieser Migration angehen möchten?

I am trying to help with the migration, personally, no pain points. Ich versuche, bei der Migration persönlich zu helfen, keine Schmerzpunkte. Unless you take into consideration that as an ecosystem, I have to maintain two ways to develop something, but meh, personally, it is okay for me. Es sei denn, man bedenkt, dass ich als Ökosystem zwei Wege pflegen muss, um etwas zu entwickeln, aber für mich persönlich ist das okay.

Maybe styled-components fixes some interoperability with NextJS and Gatsby since the last time I tried was hard to make Mui work with those tools because of the SSR and styles (I am not sure if still painful) and most libraries using styled-components work out of the box. Vielleicht behebt styled-components eine gewisse Interoperabilität mit NextJS und Gatsby, da das letzte Mal, als ich versuchte, Mui mit diesen Tools zum Laufen zu bringen, wegen des SSR und der Stile (ich bin mir nicht sicher, ob es immer noch schmerzhaft ist) und der meisten Bibliotheken, die styled-components verwenden, schwierig war

Let me know how I could help, like I said, I was using the pinned issues to find the prioritization of the Org Lassen Sie mich wissen, wie ich helfen kann, wie gesagt, ich habe die angehefteten Probleme verwendet, um die Priorisierung der Org zu finden

That is far enough, would it be better to pin different issues for visibility on what is a priority at the moment? Das ist weit genug, wäre es besser, verschiedene Themen für die Sichtbarkeit auf das festzulegen, was im Moment Priorität hat?

It depends on the time horizon you are interested in. You can follow the issue with the label important , the roadmap page on the documentation and the monthly blog product updates. Es hängt von dem Zeithorizont ab, an dem Sie interessiert sind. Sie können das Problem mit dem Label important , der Roadmap-Seite in der Dokumentation und den monatlichen Blog-Produktupdates verfolgen.

I don't fully understand this point. Ich verstehe diesen Punkt nicht ganz. Why not using styled-components when using Material-UI (today)? Warum nicht Styled-Components verwenden, wenn man Material-UI (heute) verwendet? We had 1/3 of our users going down this path when we did our last survey, 6 months ago. Bei unserer letzten Umfrage vor 6 Monaten gingen 1/3 unserer Benutzer diesen Weg.

I don't fully understand this point. Ich verstehe diesen Punkt nicht ganz. Why not using styled-components when using Material-UI (today)? Warum nicht Styled-Components verwenden, wenn man Material-UI (heute) verwendet?

@material-ui/styles works like a champ so far, no reason to migrate everything 😄 so I am one of those out of 3 that don't use it together today. @material-ui/styles funktioniert bisher wie ein Champion, kein Grund, alles zu migrieren 😄 also bin ich einer von denen von 3, die es heute nicht zusammen verwenden.

Thank you for the info about prioritization. Danke für die Info zur Priorisierung.

@yordis btw, my answer was made under the assumption you were following up on the main styled-components issue. @yordis Übrigens, meine Antwort wurde unter der Annahme gegeben, dass Sie das Hauptproblem der gestylten Komponenten weiterverfolgen. I haven't realized we were on the documentation one. Ich habe nicht bemerkt, dass wir bei der Dokumentation waren.

@oliviertassinari do you have any suggestions about the issue with theme context? @oliviertassinari hast du irgendwelche Vorschläge zum Problem mit dem Themenkontext?

I tried to use props.theme inside an styled-components but didn't work, I am not sure if you have a suggestion for it, but I think we will require to add styled-components theme provider as well. Ich habe versucht, props.theme in einem styled-components zu verwenden, aber es hat nicht funktioniert. Ich bin mir nicht sicher, ob Sie einen Vorschlag dafür haben, aber ich denke, wir müssen styled-components hinzufügen auch Themenanbieter.

Hey @oliviertassinari! Hallo @oliviertassinari! Are you looking for PR's that convert the existing customization demos to use styled-components as part of this issue? Suchen Sie PRs, die die vorhandenen Anpassungsdemos konvertieren, um im Rahmen dieser Ausgabe Styled-Components zu verwenden?

I dont think styled-components is a good styling solution. Ich glaube nicht, dass styled-components eine gute Styling-Lösung ist. current solution looks much much more readable, appealing, accessible and cleaner than styled. Die aktuelle Lösung sieht viel besser lesbar, ansprechender, zugänglicher und sauberer aus als gestylt. i dont see any good reason to migrate. Ich sehe keinen guten Grund für eine Migration.

I dont think styled-components is a good styling solution. Ich glaube nicht, dass styled-components eine gute Styling-Lösung ist. current solution looks much much more readable, appealing, accessible and cleaner than styled. Die aktuelle Lösung sieht viel besser lesbar, ansprechender, zugänglicher und sauberer aus als gestylt. i dont see any good reason to migrate. Ich sehe keinen guten Grund für eine Migration.

And get almost fully typed. Und erhalten Sie fast vollständig getippt. Don't see any reason to migrate +1 Sehe keinen Grund, +1 zu migrieren

The link you've posted, that should show growing interest to styled-components, recently started showing a downward trend: Der von Ihnen gepostete Link , der auf wachsendes Interesse an gestylten Komponenten hinweisen sollte, zeigt seit kurzem einen Abwärtstrend:

I feel that narrowing down a styling solution to a single library is going to give us the exact same problem as we have today. Ich habe das Gefühl, dass die Beschränkung einer Styling-Lösung auf eine einzelne Bibliothek uns genau das gleiche Problem bereiten wird wie heute.

What about integration with zero-runtime libraries such as linaria ? Was ist mit der Integration mit Zero-Runtime-Bibliotheken wie Linaria ? This was suggested as being looked at in May 2019 Update . Dies wurde im Update vom Mai 2019 vorgeschlagen.

So far it only recovered to pre-v5-hype. Bisher hat es sich nur vom Pre-v5-Hype erholt. Let's see how the updated data point for January till now looks. Mal sehen, wie der aktualisierte Datenpunkt für Januar bis jetzt aussieht.

@TheHolyWaffle Don't trust rank2traffic.com too much, data hasn't been very reliable nor up-to-date, its main advantage was the overall trend over 10 years (before it was made paid). @TheHolyWaffle Vertrauen Sie rank2traffic.com nicht zu sehr, die Daten waren weder sehr zuverlässig noch aktuell, ihr Hauptvorteil war der Gesamttrend über 10 Jahre (bevor sie bezahlt wurden). For a shorter time window, so 6 months, prefer https://www.similarweb.com/ as more reliable. Für ein kürzeres Zeitfenster, also 6 Monate, bevorzugen Sie https://www.similarweb.com/ als zuverlässiger.
Also take into account that once people know the API, they come back much frequently to the documentation. Berücksichtigen Sie auch, dass Benutzer, die die API kennen, sehr häufig auf die Dokumentation zurückkommen.

I dont think styled-components is a good styling solution. Ich glaube nicht, dass styled-components eine gute Styling-Lösung ist. current solution looks much much more readable, appealing, accessible and cleaner than styled. Die aktuelle Lösung sieht viel besser lesbar, ansprechender, zugänglicher und sauberer aus als gestylt. i dont see any good reason to migrate. Ich sehe keinen guten Grund für eine Migration.

And get almost fully typed. Und erhalten Sie fast vollständig getippt. Don't see any reason to migrate +1 Sehe keinen Grund, +1 zu migrieren

+1 styles is the main reason we're migrating to Material UI and moving away from styled components. +1 styles ist der Hauptgrund, warum wir zu Material UI migrieren und uns von gestylten Komponenten entfernen. It's too much CSS and refactoring it has proven to be a huge burden for us. Es ist zu viel CSS und das Refactoring hat sich als große Belastung für uns erwiesen.

Hi! Hi! First of all, thank you for providing a great component library, best one I've used so far. Zunächst einmal vielen Dank für die Bereitstellung einer großartigen Komponentenbibliothek, die beste, die ich bisher verwendet habe. Our teams have written hundreds of thousands of lines of code using the components and methodology you created and once developers learn the basics of using classes , how to write the styles etc., it's a breeze to work with even on a massive enterprise scale type of codebase. Unsere Teams haben Hunderttausende von Codezeilen mit den von Ihnen erstellten Komponenten und Methoden geschrieben, und sobald die Entwickler die Grundlagen der Verwendung von classes gelernt haben, wie man die Stile schreibt usw., ist es ein Kinderspiel, damit zu arbeiten, selbst an einem Massive Codebasis im Unternehmensmaßstab.

I'm not sure if that's the most common use of your library, but I suppose you are aware that many teams build their component libraries on top of Material UI, and so any components and decision you make also trickle down to those libraries. Ich bin mir nicht sicher, ob dies die häufigste Verwendung Ihrer Bibliothek ist, aber ich nehme an, Sie wissen, dass viele Teams ihre Komponentenbibliotheken auf der Material-Benutzeroberfläche aufbauen und daher alle Komponenten und Entscheidungen, die Sie treffen, auch in diese Bibliotheken einfließen. On our end we've been very happy with both performance and APIs so far. Wir unsererseits waren bisher sowohl mit der Leistung als auch mit den APIs sehr zufrieden.

I've been following recent development in the library and to be honest, I'm having trouble understanding some of the decisions and worried how that will affect our teams, and what's overall the benefit of this move would be, as opposed to for example forking MUI. Ich habe die jüngsten Entwicklungen in der Bibliothek verfolgt, und um ehrlich zu sein, habe ich Probleme, einige der Entscheidungen zu verstehen, und mache mir Sorgen, wie sich das auf unsere Teams auswirken wird und was der Vorteil dieses Schritts insgesamt wäre, im Gegensatz zu beispielsweise Forken von MUI. Others have voiced their concern about move to styled components so I'll focus on the other one for me - the Box component. Andere haben ihre Besorgnis über den Wechsel zu gestylten Komponenten geäußert, also konzentriere ich mich für mich auf die andere – die Box-Komponente.

I understand the utility of a Box component - to make it possible to use theme variables etc. in prop values, however the API and the consequences of using this component disqualify it from something I could recommend to our teams. Ich verstehe die Nützlichkeit einer Box-Komponente - um die Verwendung von Themenvariablen usw. in Prop-Werten zu ermöglichen, aber die API und die Folgen der Verwendung dieser Komponente disqualifizieren sie von etwas, das ich unseren Teams empfehlen könnte.

First , it has a cryptic API for no reason I can discern (unless saving a few bytes is that reason): Instead of writing <Box margin={3} /> , it would be <Box m={3} /> . Erstens hat es eine kryptische API ohne Grund, den ich erkennen kann (es sei denn, das Speichern einiger Bytes ist der Grund): Anstatt <Box margin={3} /> zu schreiben, wäre es <Box m={3} /> .

Abbreviations like that seem needless, make things potentially ambigious, and introdue a new learning curve to developers, a mapping of abbreviations to actual properties they now need to memorize: "Is applying color done using c or color ?", "Is background a b , or bg , or background , or was b a border ?" Abkürzungen wie diese erscheinen unnötig, machen die Dinge möglicherweise mehrdeutig und stellen Entwicklern eine neue Lernkurve vor, eine Zuordnung von Abkürzungen zu tatsächlichen Eigenschaften, die sie sich jetzt merken müssen: „Ist die Anwendung color mit c $ erledigt oder color ?", "Ist background ein b oder bg oder background oder war b ein border ?" "Is background-size abbreviated as bs ?" "Wird background-size als bs $ abgekürzt?"

Second , components abstract most commonly recurring UI patterns, and create APIs that provide means of customizing those patterns to the extent that the design system permits. Zweitens abstrahieren Komponenten die am häufigsten wiederkehrenden UI-Muster und erstellen APIs, die Mittel zum Anpassen dieser Muster in dem Umfang bereitstellen, wie es das Designsystem zulässt. This manifests in creating props like gutterBottom on Typography , or dense on ListItem - as opposed to accepting just about any padding or margin. Dies manifestiert sich in der Erstellung von Requisiten wie gutterBottom auf Typography oder dense auf ListItem - im Gegensatz dazu, praktisch jede Auffüllung oder jeden Rand zu akzeptieren. I feel like introducing Box to large extent undermines this effort and introduces a tool that will make a mess out of any attempt to follow a design system unless we define some very nitpicky ways that Box component can be used for and spend effort in code reviews to make sure the all the values in used Box props aren't beyond the accepted list. Ich habe das Gefühl, dass die Einführung Box diese Bemühungen weitgehend untergräbt und ein Tool einführt, das jeden Versuch, einem Designsystem zu folgen, durcheinander bringt, es sei denn, wir definieren einige sehr pingelig, wie die Box-Komponente verwendet und ausgegeben werden kann Aufwand bei Code-Reviews, um sicherzustellen, dass alle Werte in verwendeten Box-Requisiten nicht außerhalb der akzeptierten Liste liegen. And at that point, the way to "automate" this would be to create a component that restricts the options, and we're backt to square one. Und an diesem Punkt wäre die Möglichkeit, dies zu „automatisieren“, eine Komponente zu erstellen, die die Optionen einschränkt, und wir sind wieder bei Null. To give an example, why would using Box mb={2} to achieve margin under Typography be okay, but Box mb={6} not? Um ein Beispiel zu nennen, warum sollte es in Ordnung sein, Box mb={2} zu verwenden, um unter Typografie eine Marge zu erzielen, aber Box mb={6} nicht? This concern doesn't exist when we can rely on props to limit the options. Diese Bedenken bestehen nicht, wenn wir uns auf Requisiten verlassen können, um die Optionen einzuschränken.

Third concern, or rather a question I have. Drittes Anliegen, oder besser gesagt eine Frage, die ich habe. Since the Box component is potentially a quick way to build certain functionality, it would be also used by libraries built on top of MUI. Da die Box-Komponente möglicherweise eine schnelle Möglichkeit zum Erstellen bestimmter Funktionen darstellt, wird sie auch von Bibliotheken verwendet, die auf MUI aufbauen. How would one override the styles of Box components used within another component? Wie würde man die Stile von Box -Komponenten überschreiben, die in einer anderen Komponente verwendet werden? As an example. Als Beispiel. If we built ListItem using Box under the hood, would we need to introduce BoxProps={{ padding: 2 }} , or accept also dense prop based on which we write logic to apply a padding prop to a particular Box, or still something else? Wenn wir ListItem mit Box unter der Haube bauen, müssten wir dann BoxProps={{ padding: 2 }} einführen oder auch dense Prop akzeptieren, basierend auf der wir Logik schreiben, um einen padding Prop auf a anzuwenden bestimmte Box, oder noch etwas anderes?

I'm not sure if that's the most common use of your library, but I suppose you are aware that many teams build their component libraries on top of Material UI , and so any components and decision you make also trickle down to those libraries. Ich bin mir nicht sicher, ob dies die häufigste Verwendung Ihrer Bibliothek ist, aber ich nehme an, Sie wissen, dass viele Teams ihre Komponentenbibliotheken auf der Material-Benutzeroberfläche aufbauen und daher alle Komponenten und Entscheidungen, die Sie treffen, auch in diese Bibliotheken einfließen. On our end we've been very happy with both performance and APIs so far. Wir unsererseits waren bisher sowohl mit der Leistung als auch mit den APIs sehr zufrieden.

@maciej-gurban This use case is an important one for us. @maciej-gurban Dieser Anwendungsfall ist für uns sehr wichtig. Our incentives are aligned to significantly improve it. Unsere Anreize sind darauf ausgerichtet, sie deutlich zu verbessern. This is one of our objectives with v5. Dies ist eines unserer Ziele mit v5.

For instance, we are investigating the feasibility to provide a design tool that could be put in the hands of designers (paid) and would output ready to use customized Material-UI components (MIT), corresponding documentation, Sketch & Figma kit. Zum Beispiel untersuchen wir die Machbarkeit, ein Design-Tool bereitzustellen, das in die Hände von Designern gelegt werden könnte (bezahlt) und gebrauchsfertige kundenspezifische Material-UI-Komponenten (MIT), entsprechende Dokumentation, Sketch & Figma-Kit ausgeben würde. Basically, all we have been going it for Material Design but scaling it 🚀. Im Grunde haben wir alles für Material Design getan, aber es skaliert 🚀.
The end goal here would be to free the time of a couple of front-end developers in each company. Das Endziel wäre hier, die Zeit einiger Frontend-Entwickler in jedem Unternehmen freizugeben. Why have front-end developers build a custom design system when it can be done by your own designers + Material-UI at a fraction of the cost? Warum sollten Front-End-Entwickler ein benutzerdefiniertes Designsystem erstellen, wenn dies von Ihren eigenen Designern + Material-UI zu einem Bruchteil der Kosten durchgeführt werden kann? + reduce risk and have your front-end developers spend time where they make the most differences: working on the product. + Reduzieren Sie das Risiko und lassen Sie Ihre Front-End-Entwickler Zeit dort verbringen, wo sie den größten Unterschied machen: die Arbeit am Produkt.

I'm having trouble understanding some of the decisions and worried how that will affect our teams Ich habe Schwierigkeiten, einige der Entscheidungen zu verstehen, und mache mir Sorgen, wie sich das auf unsere Teams auswirken wird

If you could list them, it would be awesome. Wenn du sie auflisten könntest, wäre das super.

Others have voiced their concern about move to styled components Andere haben ihre Besorgnis über den Wechsel zu gestylten Komponenten geäußert

What's your concern with such a shift? Was stört Sie an einer solchen Verschiebung? Our objective on the styling side has a couple of layer: Unser Ziel auf der Styling-Seite hat ein paar Ebenen:

1. Unstyled component, expose the same existing components but without any styles. Nicht formatierte Komponente, stellt die gleichen vorhandenen Komponenten bereit, jedoch ohne Stile. Keep the same classes API (first seen in jQuery-UI), provide default hardcoded values for each of the classes (global class names). Behalten Sie die gleiche classes -API bei (erstmals in jQuery-UI zu sehen), stellen Sie fest codierte Standardwerte für jede der Klassen bereit (globale Klassennamen). The objective behind this shift answer to a couple of incentives. Das Ziel hinter dieser Verschiebung entspricht einer Reihe von Anreizen. First, it's to dismiss a fear our users have, same to CRA eject mode, you won't use it but it feels safe to be present. Erstens, um eine Angst zu zerstreuen, die unsere Benutzer haben, ebenso wie der CRA-Auswurfmodus, dass Sie ihn nicht verwenden werden, aber es sich sicher anfühlt, anwesend zu sein. Second, it's required to be able to build the paid design tool. Zweitens ist es erforderlich, das kostenpflichtige Designtool erstellen zu können. Third, it's required for the next layer Drittens ist es für die nächste Schicht erforderlich
2. Multiple style engines. Motoren in mehreren Stilen. The community is fragmented between different styling approaches. Die Community ist zwischen verschiedenen Styling-Ansätzen zersplittert. By order of popularity: styled-components, plain CSS, CSS modules, emotion, JSS, utility first classes. Nach Beliebtheit geordnet: Styled-Components, einfaches CSS, CSS-Module, Emotion, JSS, Utility First Classes. It still feels like we didn't find the holy grail for styling. Es fühlt sich immer noch so an, als hätten wir den heiligen Gral für Styling nicht gefunden. And until we do, better not bet too much on any styling solution. Und bis wir das tun, setzen Sie besser nicht zu viel auf eine Styling-Lösung. So, have styled-components has the default, but allow developers to switch engine, stay on JSS if they are happy too. Haben Sie also styled-components als Standard, aber erlauben Sie den Entwicklern, die Engine zu wechseln und auf JSS zu bleiben, wenn sie auch zufrieden sind.
3. Baseline theme. Grundlegendes Thema. Something less opinionated than the current default Material Desing Theme, but using the same theme's specification. Etwas weniger rechthaberisch als das aktuelle Standard-Material-Design-Design, aber mit der Spezifikation des gleichen Designs.
4. A couple of different themes on top of the baseline. Ein paar verschiedene Themen über der Grundlinie. One for marketing pages, One for the Chinese market (close to the Gmail equivalent of China). Einer für Marketingseiten, einer für den chinesischen Markt (ähnlich dem Gmail-Äquivalent von China).

I'll focus on the other one for me - the Box component. Ich werde mich für mich auf die andere konzentrieren - die Box-Komponente.

Yeah, I can hear you! Ja, ich kann dich hören! I have been working with @gregberge in the past. Ich habe in der Vergangenheit mit @gregberge zusammengearbeitet. At some point, we have considered hiding all the className props on @doctolib 's design system. Irgendwann haben wir darüber nachgedacht, alle className-Props im Designsystem von @doctolib zu verstecken. The interesting thought is that you can gain features (properties) in exchange of more constraints. Der interessante Gedanke ist, dass Sie Funktionen (Eigenschaften) im Austausch für mehr Einschränkungen erhalten können.

I wouldn't worry too much about this one. Ich würde mir um diesen nicht allzu viele Gedanken machen. This can be resolved with a global option to limit the access to the "system"'s features or an eslint rule. Dies kann mit einer globalen Option zur Einschränkung des Zugriffs auf die Funktionen des "Systems" oder einer Eslint-Regel behoben werden.

The abbreviation on the Box component is confusing. Die Abkürzung auf der Box-Komponente ist verwirrend. Code is being read more than being written, so it's important to keep clear what the code is meaning. Code wird mehr gelesen als geschrieben, daher ist es wichtig, sich klar zu machen, was der Code bedeutet. Last day I found "Box py={2}" in our codebase and I'm totally confused. Letzten Tag habe ich "Box py={2}" in unserer Codebasis gefunden und bin total verwirrt. After a search I figured out that means "paddingY". Nach einer Suche fand ich heraus, dass das "PaddingY" bedeutet. Those abbreviation should not be encouraged especially non-css properties (I can guess pt means padding-top but not for py) Diese Abkürzungen sollten nicht gefördert werden, insbesondere Nicht-CSS-Eigenschaften (ich kann vermuten, dass pt padding-top bedeutet, aber nicht für py)

@oliviertassinari Thanks for your patience @oliviertassinari Danke für deine Geduld

I'm having trouble understanding some of the decisions and worried how that will affect our teams Ich habe Schwierigkeiten, einige der Entscheidungen zu verstehen, und mache mir Sorgen, wie sich das auf unsere Teams auswirken wird

If you could list them, it would be awesome. Wenn du sie auflisten könntest, wäre das super.

I wouldn't want this to turn into a litany of things I disagree with, because ultimately you're the guys who maintain this library and our view of what makes sense will be shaped by our own needs which might and likely don't always align, and that's fine. Ich möchte nicht, dass dies zu einer Litanei von Dingen wird, mit denen ich nicht einverstanden bin, denn letztendlich sind Sie die Leute, die diese Bibliothek pflegen, und unsere Sichtweise auf das, was Sinn macht, wird von unseren eigenen Bedürfnissen geprägt, die dies möglicherweise und wahrscheinlich nicht immer tun ausrichten, und gut ist. I'm not against introducing the means of using other styling solutions - in fact I think it's great as it will bring more users who were holding off because of their dislike for JSS, but there's also us - the already existing users of your library who are sold on your solution, and if possible, would like to avoid massive refactor. Ich bin nicht gegen die Einführung der Möglichkeit, andere Styling-Lösungen zu verwenden - ich denke sogar, dass es großartig ist, da es mehr Benutzer bringen wird, die wegen ihrer Abneigung gegen JSS zurückgehalten haben, aber es gibt auch uns - die bereits bestehenden Benutzer Ihrer Bibliothek, die sind von Ihrer Lösung überzeugt und möchten nach Möglichkeit eine massive Umgestaltung vermeiden.

Even if you decide that "we still provide support for JSS", refactoring all demos and your components to styled components will force the teams using JSS to migrate to styled components. Selbst wenn Sie sich entscheiden, dass „wir weiterhin Unterstützung für JSS bieten“, wird das Refactoring aller Demos und Ihrer Komponenten in formatierte Komponenten die Teams, die JSS verwenden, dazu zwingen, auf formatierte Komponenten zu migrieren. "Why are we still using X, when MUI team moved to Y?" „Warum verwenden wir immer noch X, obwohl das MUI-Team zu Y gewechselt ist?“ - will be one of the many questions in light of which it would be really hard not to agree with needing to make that migration sooner or later. - wird eine der vielen Fragen sein, angesichts derer es wirklich schwer wäre, der Notwendigkeit dieser Migration früher oder später nicht zuzustimmen.

I can definitely empathize with wanting to reach a wider audience by using a styling solution that's more popular. Ich kann definitiv nachempfinden, dass ich ein breiteres Publikum erreichen möchte, indem ich eine beliebtere Styling-Lösung verwende. However, I think it's worth considering that "popular" is not always "best" and that a move to a different tech needs onsideration not only of advantages and disadvantages of both solution, but the context in which we're making the decision. Ich denke jedoch, dass es sich lohnt zu bedenken, dass „beliebt“ nicht immer „am besten“ ist und dass ein Wechsel zu einer anderen Technologie nicht nur die Vor- und Nachteile beider Lösungen berücksichtigen muss, sondern auch den Kontext, in dem wir die Entscheidung treffen.

Starting fresh, looking merely at advantages of X over Y makes sense, but working on an already existing system we also need to consider the cost of switching over and domino effects this bring on downstream teams. Bei einem Neuanfang ist es sinnvoll, nur die Vorteile von X gegenüber Y zu betrachten, aber wenn wir an einem bereits bestehenden System arbeiten, müssen wir auch die Kosten für die Umstellung und die Dominoeffekte berücksichtigen, die dies für nachgelagerte Teams mit sich bringt. For this switch over to make sense the advantanges of the other solution need to outweight the cost of migrating over. Damit diese Umstellung sinnvoll ist, müssen die Vorteile der anderen Lösung die Kosten der Umstellung überwiegen. It seems that for your team, that cost benefit analysis rules in favor of styled components, but from what I can tell looking at reactions at posts talking about styled components in your repo, your user base is far from the same conclusion. Es scheint, dass für Ihr Team die Kosten-Nutzen-Analyse zugunsten von gestylten Komponenten ausfällt, aber soweit ich die Reaktionen auf Posts betrachten kann, in denen es um gestylte Komponenten in Ihrem Repo geht, ist Ihre Benutzerbasis weit davon entfernt, dieselbe Schlussfolgerung zu ziehen.

Like you said, your aim is to open up MUI to more styling solutions. Wie Sie sagten, ist Ihr Ziel, MUI für mehr Styling-Lösungen zu öffnen. To provide good support for those solutions, there would need to be good documentation, examples and smooth integration layer - otherwise developers would find it hard to translate what they see in demos into what their styling solution of choice needs. Um eine gute Unterstützung für diese Lösungen zu bieten, müssten gute Dokumentationen, Beispiele und eine reibungslose Integrationsebene vorhanden sein – andernfalls würden Entwickler es schwer finden, das, was sie in Demos sehen, in die Anforderungen ihrer bevorzugten Styling-Lösung zu übersetzen. I'm just not sure if you really need to migrate to styled components to achieve the goals. Ich bin mir nur nicht sicher, ob Sie wirklich zu formatierten Komponenten migrieren müssen, um die Ziele zu erreichen. Seems like your solution is also perfectly capable, if not more so than others, to build the design tool you're after since you already use actual JS object for all the styles. Scheint, als ob Ihre Lösung auch perfekt in der Lage ist, wenn nicht mehr als andere, das gewünschte Designtool zu erstellen, da Sie bereits das eigentliche JS-Objekt für alle Stile verwenden.

One question I have, does this mean that the core of Mui would still use jss, and this allows for a better way to use styled components on top of that? Eine Frage, die ich habe, bedeutet dies, dass der Kern von Mui immer noch jss verwenden würde, und dies eine bessere Möglichkeit bietet, darüber hinaus gestylte Komponenten zu verwenden? Or would there be a way to say the core is also styled? Oder gäbe es eine Möglichkeit zu sagen, dass der Kern auch gestylt ist? I just think it would add a lot of bloat if you have two css in js solutions. Ich denke nur, es würde eine Menge Aufblähen hinzufügen, wenn Sie zwei CSS in js-Lösungen haben.

How would theming work if using styled-components? Wie würde das Thematisieren funktionieren, wenn Sie gestylte Komponenten verwenden? I used to use helpers in the CSS portion, and it was really messy. Früher habe ich Helfer im CSS-Teil verwendet, und das war wirklich chaotisch. For me, the approach of applying theme props in a JS object is a lot cleaner than in a templated string. Für mich ist der Ansatz, Themen-Requisiten in einem JS-Objekt anzuwenden, viel sauberer als in einer Zeichenfolge mit Vorlagen.

For me (scientific backend programmer by origin), MUI styles bring beautiful, calming, predictable, parameterisable logic to the mental, crazy, bonkers-rules why-the-hell tearing-hair-out world of CSS. Für mich (ursprünglicher wissenschaftlicher Backend-Programmierer) bringen MUI-Stile schöne, beruhigende, vorhersagbare, parametrisierbare Logik in die mentale, verrückte, verrückte Regel-warum-zum-Hölle-haarausreißende CSS-Welt.

The styles library (and its tight integration with the theme) is the main reason I mandate use of MUI over any other components library in the two organisations I oversee tech for - it takes all the css agony away! Die Stilbibliothek (und ihre enge Integration mit dem Thema) ist der Hauptgrund, warum ich die Verwendung von MUI gegenüber jeder anderen Komponentenbibliothek in den beiden Organisationen, für die ich die Technik beaufsichtige, vorschreibe - es nimmt die ganze CSS-Qual! At first, all the developers I work with are like "what the hell's going on? Where's the css? Just give me css!!" Zuerst sagen alle Entwickler, mit denen ich arbeite : "Was zum Teufel ist los? Wo ist das CSS? Gib mir einfach CSS!!" and then they're like "Ohhhh. riiight. Got it. Magic." und dann sind sie wie "Ohhhh. riiight. Got it. Magic."

In the longer term I think the current approach is going to become ever more powerful as the world moves to low/no code solutions (eg like sketch or figma, but outputting an actual routed app and set of components rather than a set of wireframes) - having styles expressed as an object unlocks the ability to introspect that - and create more new features in such an environment (like provision of a schema enabling direct use of MUI components within a CMS, or generation of 'theme from this' and hundreds I haven't thought of yet). Langfristig denke ich, dass der aktuelle Ansatz immer leistungsfähiger werden wird, wenn die Welt zu Low/No-Code-Lösungen übergeht (z. B. wie Sketch oder Figma, aber Ausgabe einer tatsächlichen gerouteten App und eines Satzes von Komponenten anstelle eines Satzes von Wireframes). - Stile als Objekt ausgedrückt zu haben, eröffnet die Möglichkeit, dies selbst zu prüfen - und weitere neue Funktionen in einer solchen Umgebung zu erstellen (wie die Bereitstellung eines Schemas, das die direkte Verwendung von MUI-Komponenten innerhalb eines CMS ermöglicht, oder die Generierung von 'Design aus diesem' und Hunderten von I noch nicht dran gedacht).

Moving back to the more raw-css kind of approach of styled-components doesn't preclude that - but it does make a lot of things (particularly parameterisation on the theme) a lot jankier and frustrating to achieve, and still requires much more in-depth knowledge of CSS's technicalities making it less accessible to new programmers and creative types alike. Die Rückkehr zum eher rohen CSS-Ansatz von styled-components schließt das nicht aus - aber es macht viele Dinge (insbesondere die Parametrisierung des Themas) viel nervöser und frustrierender zu erreichen und erfordert es immer noch viel gründlicheres Wissen über die technischen Einzelheiten von CSS, was es für neue Programmierer und kreative Typen gleichermaßen weniger zugänglich macht.

On the evolution of the state-of-the-art, I think styled-components has become really popular because it's a great step in the right direction from where the world was (which is why it became popular). Was die Entwicklung des Standes der Technik betrifft, denke ich, dass styled-components wirklich populär geworden ist, weil es ein großer Schritt in die richtige Richtung ist, wo die Welt war (weshalb es populär wurde). But the existing MUI styles system is the next step on from that; Aber das vorhandene MUI-Stilsystem ist der nächste Schritt darauf; not an incorrect side-step. kein falscher Seitensprung. Once everyone's migrated to styled-components then the question will be "wait: why on earth are we doing this with these weird raw strings in our components...?" Sobald alle zu gestylten Komponenten migriert sind, wird die Frage lauten: "Moment mal: Warum um alles in der Welt machen wir das mit diesen seltsamen rohen Strings in unseren Komponenten ...?"

Maybe I'm totally wrong, but for my $0.02, I'm begging you to stay the course for at least another major version :) Vielleicht liege ich total falsch, aber für meine 0,02 $ bitte ich Sie, den Kurs für mindestens eine weitere Hauptversion beizubehalten :)

@thclark your main concern seems to be with the CSS template string syntax vs the JavaScript style object API. @thclark Ihr Hauptanliegen scheint die Syntax der CSS-Vorlagenzeichenfolge im Vergleich zur Objekt-API im JavaScript-Stil zu sein. Is this accurate? Ist das richtig? It also seems to be the concern with most of the other comments of the thread. Es scheint auch das Problem mit den meisten anderen Kommentaren des Threads zu sein.

Styled-components and emotions support both APIs. Gestylte Komponenten und Emotionen unterstützen beide APIs. This wasn't the main purpose of the issue. Dies war nicht der Hauptzweck des Problems. The objective of this issue was to anticipate the migration to a different styling solution. Das Ziel dieser Ausgabe war es, die Migration zu einer anderen Styling-Lösung vorwegzunehmen. However, we never move forward with "use styled-components in all the demos even if we didn't migrate the core engine". Wir kommen jedoch nie weiter mit "benutze gestylte Komponenten in allen Demos, auch wenn wir die Kern-Engine nicht migriert haben". We have opted for keeping both synchronized. Wir haben uns dafür entschieden, beides synchron zu halten.
At this point, keeping the issue open doesn't add much value outside triggering discussions like this one :). An diesem Punkt bringt es keinen großen Mehrwert, das Thema offen zu halten, wenn man keine Diskussionen wie diese auslöst :). We have to migrate the demos anyway for #22342. Für #22342 müssen wir die Demos sowieso migrieren.

I personally prefer the JavaScript API over the CSS string one because: Ich persönlich bevorzuge die JavaScript-API gegenüber der CSS-Zeichenfolge, weil:

• It doesn't ask for another linter/formater. Es fragt nicht nach einem weiteren Linter/Formatierer.
• I'm used to it. Ich bin daran gewöhnt.
• It plays nicely with TypeScript. Es spielt gut mit TypeScript.

However, it's unclear what the community, at large, will enjoy using most. Es ist jedoch unklar, was die Community im Allgemeinen am liebsten verwenden wird. CSS template has its advantages too. CSS-Vorlagen haben auch ihre Vorteile. It's easier to copy & paste code between the browser and the code. Es ist einfacher, Code zwischen dem Browser und dem Code zu kopieren und einzufügen. A lot more people (overall: designers, developers, etc.) are familiar with the approach. Der Ansatz ist viel mehr Menschen (insgesamt: Designer, Entwickler etc.) bekannt.

To be noted that I think that we should use the style utilities as much as possible in the demos with v5. Anzumerken ist, dass ich denke, dass wir die Stil-Utilities so oft wie möglich in den Demos mit v5 verwenden sollten.

@mnajdova any thoughts on the matter? @mnajdova irgendwelche Gedanken zu diesem Thema? Maybe it's worth asking the community on a poll. Vielleicht lohnt es sich, die Community bei einer Umfrage zu fragen.

@oliviertassinari succinctly put, as usual. @oliviertassinari kurz und bündig gesagt, wie immer. Yes, my main concern is retaining the Javascript API. Ja, mein Hauptanliegen ist die Beibehaltung der Javascript-API. Honestly, I wasn't aware that styled-components retained that, as all of the examples I came across seem to be css templated. Ehrlich gesagt war mir nicht bewusst, dass styled-components dies beibehielt, da alle Beispiele, auf die ich gestoßen bin, CSS-Vorlagen zu sein scheinen.

That perhaps moots most of my points above. Das deckt vielleicht die meisten meiner obigen Punkte ab. Nevertheless, glad you didn't move across - and thanks for your and the team's continued efforts here. Trotzdem bin ich froh, dass Sie nicht umgezogen sind - und vielen Dank für Ihre Bemühungen und die des Teams hier. I've built things I never could have without MUI existing. Ich habe Dinge gebaut, die ich ohne MUI nie hätte bauen können.

This issue is being resolved in v5. Dieses Problem wird in v5 behoben. We have migrated the documentation of the slider to the new approach: https://next.material-ui.com/components/slider-styled/. Wir haben die Dokumentation des Sliders auf den neuen Ansatz migriert: https://next.material-ui.com/components/slider-styled/. We use the sx prop anytime simple CSS are necessary then use the styled API for more heavy customizations. Wir verwenden die sx -Prop immer dann, wenn einfaches CSS erforderlich ist, und verwenden dann die styled -API für umfangreichere Anpassungen. I believe the previous concern raised have been handled, if not, please comment :). Ich glaube, dass die zuvor geäußerten Bedenken behandelt wurden, wenn nicht, kommentieren Sie bitte :).