Material-ui: Unterstützt standardmäßig das Erweiterungs-Plugin für JSS

@tdkn Laden Sie das jss-extend-Plugin? https://github.com/cssinjs/react-jss#custom-setup

@mbrookes
Danke👍
Ich habe es wie folgt behoben.
Aber dies ausführlich dokumentiert? :enttäuscht:

import React, { Component } from 'react'
import ReactDOM, { render } from 'react-dom'
import PropTypes from 'prop-types'
import { JssProvider, SheetsRegistry, jss } from 'react-jss'
import { withStyles } from 'material-ui/styles'

const withJSSProvider = Component => props => (
  <JssProvider registry={new SheetsRegistry()} jss={jss}>
    <Component {...props} />
  </JssProvider>
)

const styles = theme => ({
  ext: {
    color: '#FF0000',
  },
  text: {
    extend: 'ext',
    fontSize: '50px',
    cursor: 'pointer',
    userSelect: 'none'
  }
})

<strong i="10">@withJSSProvider</strong>
@withStyles(styles)
class App extends Component {
  static propTypes = {
    classes: PropTypes.object.isRequired
  }

  onClick(event) {
    const className = event.target.getAttribute('class')
    const style = getComputedStyle(event.target, null)
    const { fontSize, cursor, userSelect, color } = style

    console.log(`className: ${className}`)
    console.log({ fontSize, cursor, userSelect, color })
  }

  render() {
    const { classes } = this.props
    return (
      <p className={classes.text} onClick={this.onClick}>Foo Bar Baz</p>
    )
  }
}

render(<App />, document.getElementById('root'))

Aber jss-extend ist nicht Teil von jss-preset-default?
https://material-ui-next.com/customization/css-in-js/#jss
https://github.com/cssinjs/jss-preset-default/blob/master/package.json#L50

@giapelle Guter Punkt. @kof?

@tdkn Danke für das Feedback. Ich füge die Änderung dem Breaking-Change-Teil des Changelogs hinzu.

• [Kern] Bundle-Größe um 2 KB reduzieren gzipped (#9129) @oliviertassinari
  Wir haben entfernt:
  
  
  
  • jss-expandieren (1,3 kB)
  
  
  • jss-compose (426 B)
  
  
  • jss-extend (702 B)
  
  
  • jss-Vorlage (330 B)
  
  

Wir müssen erwähnen, wie Benutzer eine JSS-Instanz an mehreren Stellen anpassen können, da wir durch diese Optimierung dazu geführt haben, dass viele Benutzer auf dieses und ähnliche Probleme gestoßen sind (immer noch nicht überzeugt, dass es sich gelohnt hat).

@kof Ich denke, du könntest Recht haben: #9335

@kof Ich denke, wir müssen das als Experiment sehen. Meine Strategie war, abzuwarten und zu sehen. Wenn sich Leute darüber beschweren, fügen wir die Plugins hinzu, die sie vermissen.

für mich dreht sich alles um komponieren

@kof Ich denke, wir müssen das als Experiment sehen. Meine Strategie war, abzuwarten und zu sehen. Wenn sich Leute darüber beschweren, fügen wir die Plugins hinzu, die sie vermissen.

Es ist im Grunde so, als würde man auf den ersten Benutzer warten, der sich über das Fehlen eines Plugins beschwert, das er verwendet, Sie werden dieses Experiment nie beenden, haha

"Composes" scheint eine gute Lösung zu sein, um das Shared-Stylesheet-Problem zu lösen"

Doh! @oallouch auch hier: Ich war mir sicher, dass mui jss-preset-default verwendet, aber dann bin ich darauf gestoßen.
Ich habe versucht, compose oder extend zu verwenden.
@olegberman hat sich diese Entfernung gelohnt, wenn für 2 KB doch gzipped? 🤔

@oliviertassinari hat es dir gesagt

Wir haben die Dokumentation aktualisiert, um diese Änderung widerzuspiegeln.

Ich bin auf das gleiche Problem gestoßen, als ich versuchte, das Extend-Plugin zu verwenden.
Ich habe versucht, diesem zu folgen: https://material-ui-next.com/guides/right-to-left/#3 -jss-rtl
aber ich verwende serverseitiges Rendering und konnte es nicht zum Laufen bringen.

PS: Ich bin mir nicht sicher, ob es sich gelohnt hat, diese Plugins für 2 KB zu entfernen, da dies wirklich großartige Funktionen sind, die jeder nutzen sollte 😁

Ich zweifle daran, dass Extend und Compose IMHO wesentliche Tools in JSS sind und die 2 KB nicht wert sind.

Der Rendering-Laufzeit-Overhead muss quantifiziert werden. Es geht nicht nur um die Bündelgröße.

Es ist immer noch optional für das mui. Wenn Sie also feststellen, dass es den Overhead erhöht, können Sie die classNames-Bibliothek und den Spread-Operator weiterhin verwenden, aber ich denke, es wird keinen großen Unterschied machen.

Ich habe versucht, das jss-extend-Plugin genau so zu aktivieren, wie das jss-rtl-Plugin laut Dokumentation aktiviert werden sollte. Derselbe Code, aber ich habe alle Plugin-bezogenen Aufrufe durch jss-extend ersetzt. Aber ohne Erfolg. Die Regeln, die eigentlich erweitert werden sollten, sind nicht betroffen. Könnte es irgendjemand am Ende geschafft haben?

Verdammt, der halbe letzte Tag wurde damit verbracht, jss-extend in material-ui zu verwenden, mit diesem Beispiel, das irgendwo gefunden wurde:
cssLabel: { "&$cssFocused": { color: grey[500] } }, cssFocused: { backgroundColor: blue[500] },
wo ich dachte, dass "&$cssFocused wie extend: cssFocused wäre. Aber es ist nicht. Also wie macht man das?

@nsaubi Sie sprechen über die Verschachtelungsfunktion und & wird durch den enthaltenden Regelselektor ersetzt, genau wie in sass.

Irgendwelche Informationen darüber, ob jss-extend/compose in Zukunft zum Standard wird?

Ich hoffe, dass Extend es zurück schafft, da es hilft, den jss-Code imo sauberer aussehen zu lassen.

++ (1 )

2kb ist eigentlich egal. Ich denke, dass es für die Zukunft wichtiger ist, ein gutes Codierungsmuster mit "Extend and Compose" zu etablieren.
@oliviertassinari Könnten Sie bitte evaluieren, sie wieder hinzuzufügen und tatsächlich volle Unterstützung für sie hinzuzufügen?

@gitsupersmecher Sie können bereits volle Unterstützung für „Erweitern und Zusammenstellen“ erhalten, indem Sie das Plugin mit der Komponente JssProvider zu JSS hinzufügen. Die meisten Menschen kommen auch ohne aus. Die Paketerhöhung um +2 KB ist die eine Seite des Problems, die Laufzeitkosten die andere.

Ich denke, die Laufzeitkosten sind für diese 2 fast nicht spürbar. Ich denke auch, dass es sich lohnt, ein paar KB dafür hinzuzufügen, da wir das Styling zu einem Teil der öffentlichen API gemacht haben und dies sehr beliebte Dinge sind.

Anstelle von Extend könnte man jedoch den Spread-Operator verwenden, der die meisten Fälle abdeckt, und die Zusammensetzung kann innerhalb einer Komponente durch Verketten eines Klassennamens erfolgen.

: +1: beim erneuten Hinzufügen dieser beiden (erweitern und zusammensetzen). Sie sind es definitiv wert für nur 2 KB IMO.

Eine weitere Option besteht darin, die interne jss-Instanz wirklich auszublenden und deutlich zu machen, wie das eigene jss-Setup für das Styling verwendet werden kann.

Hallo, ich versuche, jss-extend in einem nextjs-Projekt hinzuzufügen (unter Verwendung des jss-rtl-Plugin-Beispiels) ohne Erfolg. Kann es jemand zum Laufen bringen?

^ würde das auch gerne wissen

Hier poste ich, was ich mache. Ich weiß nicht, wie ich generateClassName implementieren soll, da im nextjs-Beispiel bereits verwendet wird.

Nehmen wir dieses Beispiel als Basis:
https://github.com/mui-org/material-ui/tree/master/examples/nextjs

Installieren Sie zuerst jss-extend
npm i --save jss-extend

/pages/_app.js

import React from 'react';
import App, { Container } from 'next/app';
import { MuiThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import JssProvider from 'react-jss/lib/JssProvider';
import getPageContext from '../src/getPageContext';

/* --------------------------------------------------------------------------------
* ADD THE IMPORTS
*-----------------------------------------------------------------------------------*/
import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
import { create } from 'jss';
import jssExtend from 'jss-extend';

const jss = create({ plugins: [...jssPreset().plugins, JssProvider ()] });


class MyApp extends App {
  constructor(props) {
    super(props);
    this.pageContext = getPageContext();
  }

  pageContext = null;

  componentDidMount() {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles && jssStyles.parentNode) {
      jssStyles.parentNode.removeChild(jssStyles);
    }
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <Container>
        {/* Wrap every page in Jss and Theme providers 
             HERE ALSO ADD JSS TO PROVIDER
          */}
        <JssProvider
          jss={this.jss}
          registry={this.pageContext.sheetsRegistry}
          generateClassName={this.pageContext.generateClassName}
        >
          {/* MuiThemeProvider makes the theme available down the React
              tree thanks to React context. */}
          <MuiThemeProvider
            theme={this.pageContext.theme}
            sheetsManager={this.pageContext.sheetsManager}
          >
            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
            <CssBaseline />
            {/* Pass pageContext to the _document though the renderPage enhancer
                to render collected styles on server side. */}
            <Component pageContext={this.pageContext} {...pageProps} />
          </MuiThemeProvider>
        </JssProvider>
      </Container>
    );
  }
}

export default MyApp;

Gibt es einen Plan für das Hinzufügen von Extend Back?

Ich folge der Anleitung auf https://material-ui.com/guides/right-to-left/#3 -jss-rtl und habe die RTL so geändert, dass sie erweitert wird, aber es funktioniert nicht. Irgendwelche Erkenntnisse darüber, warum?

Ich mache das und das Plugin wird nicht geladen (v3.2.2)
Irgendwelche Ideen?

import React from 'react'
import ReactDOM from 'react-dom'
import {
  MuiThemeProvider,
  createMuiTheme,
  createGenerateClassName,
  jssPreset
} from '@material-ui/core/styles'
import JssProvider from 'react-jss/lib/JssProvider'
import { create } from 'jss'
import jssExtend from 'jss-extend'
import CssBaseline from '@material-ui/core/CssBaseline'
import { UserProvider } from './context/User'
import App from './components/App'

const jss = create({ plugins: [...jssPreset().plugins, jssExtend()] })
const generateClassName = createGenerateClassName()

const theme = createMuiTheme({ ... })

const Main = () => (
  <JssProvider jss={jss} generateClassName={generateClassName}>
    <MuiThemeProvider theme={theme}>
      <CssBaseline/>
        <App/>
    </MuiThemeProvider>
  </JssProvider>
)

Sie müssen Plugins in der richtigen Reihenfolge einrichten, http://cssinjs.org/plugins?v=v9.8.7

Sie verwenden eine für mui erstellte Voreinstellung und fügen jssExtend in der falschen Reihenfolge hinzu. Stattdessen könnten Sie eine jss-Instanz von „react-jss“ verwenden, auf die bereits alle Voreinstellungen angewendet wurden: importieren Sie {jss} aus „react-jss“ oder importieren Sie die Standardvoreinstellung von http://cssinjs.org/jss-preset-default?v =v4.5.0

Gehen Sie einfach auf dieses Problem ein. Glauben Sie auch, dass es standardmäßig vorhanden sein sollte.

Ich würde argumentieren, dass es auch standardmäßig vorhanden sein sollte, da die Argumentation von @oliviertassinari wahrscheinlich nicht stark genug ist. Zum Teil, weil, wenn Extend/Compose nicht gefördert werden, die Codebasis mit zusätzlicher Aufblähung durch unnötiges CSS enden könnte – was auch zu unnötiger Verarbeitung führen könnte. Vielleicht nicht so schädlich wie 2 KB und vielleicht nicht so viel Verarbeitung wie Extend/Compose tun würde, aber die Codewartung ist auch hier ein Faktor. Zusammenfassend mag meine Argumentation auch nicht so stark sein, aber angesichts der nicht so starken Argumentation für die zur Verfügung stehenden Optionen ... sage ich, gib der Menge, was sie will! :D

Ich stimme zu, dass Extend und Compose standardmäßig enthalten sein sollten. Sie sind so grundlegende Funktionen und der Grund, warum ich JSS verwende. Ich würde gerne sehen, dass sie wieder hinzugefügt werden, da selbst kleine Projekte sie wahrscheinlich verwenden werden und die benutzerdefinierte Installation vergleichsweise sehr langwierig ist.

@AdamWhitehurst Könntest du das Thema positiv bewerten? Es würde uns helfen, einen besseren Kompromiss zu machen :).

Ich denke, dass wir die folgenden gewichteten Dimensionen berücksichtigen müssen:

• die Anzahl der Upvotes/Teilnehmer an der Konversation.
• die Laufzeitkosten: ? (Kann jemand unsere Benchmark-Suite damit ausführen?)
• die Kosten für die Bündelgröße: 613 B . Das Problem bei dieser Dimension sind die Kosten für X, um nur eine unserer Komponenten wie Modal zu verwenden.

Irgendwann könnten wir dafür eine Twitter-Umfrage durchführen 🤔.

Laufzeitkosten, wenn Sie Extend/Compose-Plugins installiert haben, sind fast 0, es ist eine Überprüfung, ob die Eigenschaft extend oder composes definiert ist, wenn nicht - es tut nichts

Total, ich habe den ersten Post positiv bewertet, meinst du das? Ich bin irgendwie neu in all dem, also hab Geduld mit mir, haha.

Nehmen Sie auch meine positive Bewertung an

Eine weitere Überlegung könnte sein, wie performant Workarounds sind. Beispiel aus meinem Code:

<Typography variant='h5' className={`${classes.sideLink} ${classes.leftSideLink}`} >About</Typography>

Wie hoch wären die Kosten für diese Problemumgehung?

Irgendwelche Neuigkeiten zu diesem Thema für Extend and Compose? Wie andere war auch ich nicht in der Lage, den Dokumenten zu folgen, um separate Plugins zu installieren. Ich habe sogar das Beispiel kopiert, bin aber auf Probleme mit StylesProvider gestoßen.

@gabrielliwerant Es sollte einfach sein, neue Plugins hinzuzufügen. Wenn Material-UI dies nicht ausführen kann, sollten wir uns auf dieses Problem konzentrieren.

Ich schließe, da wir das Label wait for upvotes bereits hinzugefügt haben.

@gabrielliwerant

Das neueste ist derzeit unter: https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-extend

npm i jss-plugin-extend

import {jssPreset, StylesProvider, ThemeProvider} from '@material-ui/styles';
import {create} from "jss";
import jssPluginSyntaxExtend from "jss-plugin-extend";

const jss = create({
    plugins: [...jssPreset().plugins, jssPluginSyntaxExtend()],
});

Dann scheint so etwas gut genug zu funktionieren ...

    render() {
        const {Component, pageProps} = this.props;

        return (
            <Container>
                <Head>
                    <title></title>
                </Head>
                <StylesProvider jss={jss}>
                    <ThemeProvider theme={theme}>
                            <CssBaseline/>
                            <Component {...pageProps} />
                    </ThemeProvider>
                </StylesProvider>
            </Container>
        );
    }

@gabrielliwerant

Das neueste ist derzeit unter: https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-extend

npm i jss-plugin-extend

import {jssPreset, StylesProvider, ThemeProvider} from '@material-ui/styles';
import {create} from "jss";
import jssPluginSyntaxExtend from "jss-plugin-extend";

const jss = create({
  plugins: [...jssPreset().plugins, jssPluginSyntaxExtend()],
});

Dann scheint so etwas gut genug zu funktionieren ...

  render() {
      const {Component, pageProps} = this.props;

      return (
          <Container>
              <Head>
                  <title></title>
              </Head>
              <StylesProvider jss={jss}>
                  <ThemeProvider theme={theme}>
                          <CssBaseline/>
                          <Component {...pageProps} />
                  </ThemeProvider>
              </StylesProvider>
          </Container>
      );
  }

Ich habe diese Lösung ausprobiert, aber in dieser Version funktioniert nur jss-plugin-extend, alle eingebauten Plugins ( ... jssPreset ().plugins ) funktionieren nicht, als ob sie nicht da wären. material-ui v4.5, jss v10

Dies ist die Lösung, die für mich funktioniert:

import jss from 'jss';
import preset from 'jss-preset-default';
import { StylesProvider } from '@material-ui/styles';

jss.setup(preset());

<StylesProvider jss={jss}>
  ...
</StylesProvider>

"@material-ui/styles": "^4.5.0",
"jss": "^10.0.0",
"jss-preset-default": "^10.0.0-alpha.27"

Hallo Leute, ist es möglich, MuiThemeProvider zu verwenden und auch jss-Plugins zu verwenden? Die Dokumentation scheint etwas alt zu sein, und ich habe eine Lösung, die nicht mehr mit Extend and Compose funktioniert.
Ich nehme an, das liegt an einer Kontextänderung. So sieht mein Code aus:

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { StylesProvider, jssPreset, createGenerateClassName } from '@material-ui/styles';
import { create } from 'jss';
import jssCompose from 'jss-plugin-compose';
import jssExtend from 'jss-plugin-extend';

const ThemeProvider = ({ children }) => (
  <StylesProvider jss={jss} generateClassName={generateClassName}>
    <MuiThemeProvider theme={theme}>
      <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
    </MuiThemeProvider>
  </StylesProvider>
);

Ja, es ist möglich, es ist eine Voraussetzung für die Rechts-nach-Links-Unterstützung für die Bibliothek.

@oliviertassinari gibt es ein Beispiel dafür, wie man benutzerdefinierte JSS-Plugins wie jss-extend mit nextJS hinzufügt?

@guiihlopes Ich würde empfehlen, dem RTL-Leitfaden zu folgen, er sollte ähnlich sein: https://material-ui.com/guides/right-to-left/#3 -jss-rtl.

@guiihlopes Ich würde empfehlen, dem RTL-Leitfaden zu folgen, er sollte ähnlich sein: https://material-ui.com/guides/right-to-left/#3 -jss-rtl.

Cool ... Ich habe versucht, der gleichen Anleitung zu folgen, und ich stecke fest:

async getInitialProps(ctx) {
    // imported jssExtend from 'jss-plugin-extend';
    const plugins = [...jssPreset().plugins, jssExtend()];
    const jss = create({ plugins });
    // Render app and page and get the context of the page with collected side effects.
    const sheets = new ServerStyleSheets({
      jss,
    });
    const originalRenderPage = ctx.renderPage;

    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: App => props => sheets.collect(<App {...props} />),
      });

    const initialProps = await Document.getInitialProps(ctx);

    return {
      ...initialProps,
      // Styles fragment is rendered after the app and page rendering finish.
      styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
    };
  }

Ich habe auch die folgende Anleitung verwendet: https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js

Idk, warum es nicht funktioniert, ServerStyleSheets Optionen an StylesProvider übergeben und es sollte funktionieren, richtig?
https://github.com/mui-org/material-ui/blob/master/packages/material-ui-styles/src/ServerStyleSheets/ServerStyleSheets.js#L24

Könntest du @oliviertassinari mir eine Idee geben, warum es nicht richtig funktioniert?

@guiihlopes ändere die Reihenfolge deiner Plugins und setze jssExtend vor die Voreinstellungen. ;)

@guiihlopes ändere die Reihenfolge deiner Plugins und setze jssExtend vor die Voreinstellungen. ;)

Habe ich schon probiert, geht immer noch nicht... :/

Obwohl man Extend-Plugin zu StyleProvider hinzufügen kann, erlauben die Typdefinitionen TS für JSS-Styling in MUI keine Extend-Syntax.

Obwohl man Extend-Plugin zu StyleProvider hinzufügen kann, erlauben die Typdefinitionen TS für JSS-Styling in MUI keine Extend-Syntax.

Ich denke , @mifrej hat recht. Ich habe fast alle hier genannten Möglichkeiten ausprobiert, aber keine davon funktioniert mehr. Vielleicht haben sie früher gearbeitet!