Material-ui: Prise en charge du plug-in d'extension JSS par défaut

@tdkn Chargez -vous le plugin jss-extend ? https://github.com/cssinjs/react-jss#custom -setup

@mbrookes
Merci👍
Je l'ai corrigé comme ci-dessous.
Mais, cela documenté en détail ? :déçu:

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'))

Mais jss-extend ne fait pas partie du 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 Bon point. @kof?

@tdkn Merci pour les commentaires. J'ajoute le changement dans la partie changement de rupture du journal des modifications.

• [core] Réduire la taille du bundle de 2 Ko gzippé (#9129) @oliviertassinari
  Nous avons supprimé :
  
  
  
  • jss-expand (1.3 kB)
  
  
  • jss-composer (426 B)
  
  
  • extension jss (702 B)
  
  
  • modèle jss (330 B)
  
  

Nous devons mentionner comment l'utilisateur peut personnaliser une instance JSS à plusieurs endroits, car grâce à cette optimisation, nous avons fait en sorte que de nombreux utilisateurs se heurtent à ce problème et à des problèmes similaires (toujours pas convaincus que cela en valait la peine)

@kof je pense que tu as peut-être raison : #9335

@kof Je pense que nous devons voir cela comme une expérience. Ma stratégie était d'attendre et de voir. Si les gens se plaignent, nous ajoutons les plugins qui leur manquent.

pour moi, tout est question de composition

@kof Je pense que nous devons voir cela comme une expérience. Ma stratégie était d'attendre et de voir. Si les gens se plaignent, nous ajoutons les plugins qui leur manquent.

C'est fondamentalement comme attendre le premier utilisateur qui se plaint de l'absence d'un plugin qu'il utilise, vous ne finirez jamais cette expérience haha

"Compose" semble être une bonne solution pour résoudre le problème de la feuille de style partagée"

Oh ! @oallouch pareil ici: j'étais sûr que mui utilisait jss-preset-default mais je suis tombé là-dedans.
J'essayais d'utiliser compose ou extend .
@olegberman cette suppression valait-elle si pour 2kb gzippé après tout? 🤔

@oliviertassinari te l'a dit

Nous avons mis à jour la documentation pour refléter ce changement.

J'ai rencontré le même problème en essayant d'utiliser le plugin extend.
J'ai essayé de suivre ceci : https://material-ui-next.com/guides/right-to-left/#3 -jss-rtl
mais j'utilise le rendu côté serveur et je n'ai pas pu le faire fonctionner.

PS : Pas sûr que ça vaille la peine de supprimer ces plugins pour 2kb car ce sont des fonctionnalités vraiment géniales que tout le monde devrait utiliser 😁

J'appuie que, étendre et composer sont des outils essentiels à mon humble avis dans JSS et ne valent pas les 2kb.

La surcharge d'exécution du rendu doit être quantifiée. Il ne s'agit pas seulement de la taille du paquet.

C'est toujours facultatif pour le mui, donc si vous trouvez que cela augmente la surcharge, vous pouvez continuer à utiliser la bibliothèque classNames et l'opérateur de propagation, je pense que cela ne fera pas beaucoup de différence.

J'essayais d'activer le plugin jss-extend de la manière exacte dont le plugin jss-rtl devrait être activé selon la documentation. Le même code, mais j'ai remplacé tous les appels liés au plugin par jss-extend one. Mais sans succès. Les règles qui devraient être étendues ne sont en fait pas affectées. Quelqu'un aurait-il pu le faire finalement?

Bon sang, la moitié de la dernière journée a été consacrée à l'utilisation de jss-extend dans material-ui, avec cet exemple trouvé quelque part :
cssLabel: { "&$cssFocused": { color: grey[500] } }, cssFocused: { backgroundColor: blue[500] },
où je pensais que "&$cssFocused serait comme extend: cssFocused. Mais ce n'est pas. Alors comment faire ?

@nsaubi , vous parlez de la fonctionnalité d'imbrication, et est remplacé par le sélecteur de règle contenant, comme dans sass.

Des informations sur si jss-extend/compose deviendra la norme à l'avenir ?

J'espère que extend le fera revenir car cela aide à rendre le code jss plus propre imo.

++ (1 )

2ko n'a pas vraiment d'importance. Je pense que l'établissement d'un bon modèle de codage avec "étendre et composer" est plus important pour l'avenir.
@oliviertassinari Pourriez-vous s'il vous plaît évaluer pour les rajouter, et en fait, pour leur ajouter un support complet?

@gitsupersmecher Vous pouvez déjà avoir un support complet pour "étendre et composer" en ajoutant le plugin à JSS avec le composant JssProvider . La plupart des gens peuvent s'en passer. L'augmentation du bundle de +2kb est un côté du problème, le coût d'exécution est l'autre.

Je pense que le coût d'exécution n'est presque pas perceptible pour ces 2. Je pense aussi qu'il vaut la peine d'ajouter quelques ko pour cela, car nous avons intégré le style à l'API publique et ce sont des choses très populaires à faire.

Cependant, au lieu d'étendre, on peut utiliser l'opérateur de propagation, qui couvre la plupart des cas et la composition peut être effectuée à l'intérieur d'un composant en concaténant un nom de classe.

:+1: en rajoutant ces deux (étendre et composer). Ils en valent vraiment la peine pour seulement 2 Ko IMO.

une autre option consiste à masquer réellement l'instance jss interne et à indiquer très clairement comment utiliser sa propre configuration jss pour le style.

Bonjour, j'essaie d'ajouter jss-extend dans un projet nextjs (en utilisant l'exemple de plugin jss-rtl) sans succès. Quelqu'un peut le faire fonctionner ?

^ j'aimerais bien savoir aussi

Ici je poste ce que je fais. Je ne sais pas comment implémenter generateClassName car dans l'exemple nextjs est déjà utilisé.

Prenant comme base cet exemple :
https://github.com/mui-org/material-ui/tree/master/examples/nextjs

Installez d'abord 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;

Existe-t-il un plan pour ajouter une extension ?

Je suis le guide sur https://material-ui.com/guides/right-to-left/#3 -jss-rtl, et j'ai changé le rtl pour l'étendre, mais ça ne marche pas. Une idée sur pourquoi?

Je fais cela et le plugin ne se charge pas (v3.2.2)
Des idées?

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>
)

Vous devez configurer les plugins dans le bon ordre, http://cssinjs.org/plugins?v=v9.8.7

Vous utilisez .un préréglage créé pour mui et ajoutez jssExtend dans le mauvais ordre. Au lieu de cela, vous pouvez utiliser une instance jss de react-jss à laquelle tous les préréglages sont déjà appliqués : importez {jss} à partir de "react-jss" ou importez le préréglage par défaut à partir de http://cssinjs.org/jss-preset-default?v =v4.5.0

Je viens de rencontrer ce problème. Croyez également qu'il aurait dû être en place par défaut.

Je dirais qu'il devrait également être en place par défaut sur la base que le raisonnement de @oliviertassinari n'est probablement pas assez fort. En partie parce que si l'extension/composition n'est pas encouragée, il y a de fortes chances que la base de code se termine par un gonflement supplémentaire dû à un CSS inutile, ce qui pourrait également entraîner un traitement inutile. Peut-être pas aussi nocif que 2kb et peut-être pas autant de traitement que le ferait extend/compose, mais la maintenance du code est également un facteur ici. En conclusion, mon raisonnement n'est peut-être pas aussi solide non plus, mais en présence d'un raisonnement pas si solide pour les options à portée de main... je dis donne à la foule ce qu'elle veut ! :RÉ

Je suis d'accord que extend et compose doivent être inclus par défaut. Ce sont des fonctions tellement fondamentales et la raison pour laquelle j'utilise JSS. J'aimerais les voir ajoutés à nouveau, car même de petits projets les utiliseront probablement et l'installation personnalisée est relativement longue.

@AdamWhitehurst Pourriez-vous voter pour le problème ? Cela nous aiderait à faire un meilleur compromis :).

Je pense que nous devons considérer les dimensions pondérées suivantes :

• le nombre de votes positifs/participants à la conversation.
• le coût d'exécution : ? (Quelqu'un peut-il exécuter notre suite de référence avec ?)
• le coût de la taille du paquet : 613 B . Le problème avec cette dimension concerne le coût pour X de n'utiliser qu'un seul de nos composants, comme le Modal.

Finalement, nous pourrions lancer un sondage Twitter pour cela 🤔.

le coût d'exécution si vous avez des plugins d'extension/composition installés est presque 0, c'est une vérification si la propriété extend ou composes est définie, sinon - elle ne fait rien

Totalement, j'ai voté pour le premier message, c'est ce que vous voulez dire? Je suis en quelque sorte nouveau dans tout cela, alors soyez indulgent avec moi, haha.

Prenez mon vote positif aussi

Une autre considération pourrait être la performance des solutions de contournement. Exemple de mon code:

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

Quel serait le coût de cette solution de contournement ?

Des nouvelles sur ce problème pour extend et compose ? Comme d'autres, je n'ai pas non plus été en mesure de suivre la documentation pour installer des plugins séparés. J'ai même copié l'exemple mais j'ai rencontré des problèmes avec StylesProvider.

@gabrielliwerant Il devrait être facile d'ajouter de nouveaux plugins. Si Material-UI ne parvient pas à s'exécuter, nous devrions nous concentrer sur ce problème.

Je termine car nous avons déjà ajouté le libellé wait for upvotes .

@gabrielliwerant

La dernière est actuellement à : 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()],
});

Alors quelque chose comme ça semble fonctionner assez bien...

    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

La dernière est actuellement à : 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()],
});

Alors quelque chose comme ça semble fonctionner assez bien...

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

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

J'ai essayé cette solution, mais dans cette version, seul jss-plugin-extend fonctionne, tous les plugins intégrés ( ... jssPreset ().plugins ) ne fonctionnent pas, comme s'ils n'étaient pas là. matériel-ui v4.5, jss v10

C'est la solution qui fonctionne pour moi:

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"

Salut les gars, il est possible d'utiliser MuiThemeProvider et d'utiliser également les plugins jss ? La documentation semble être un peu ancienne, et j'ai une solution qui ne fonctionne plus avec extend et compose.
Je suppose que c'est à cause d'un changement de contexte. Voici à quoi ressemble mon code :

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>
);

Oui, c'est possible, c'est une exigence du support de droite à gauche pour la bibliothèque.

@oliviertassinari y a-t-il un exemple sur la façon d'ajouter des plugins JSS personnalisés comme jss-extend avec nextJS ?

@guiihlopes Je vous encourage à suivre le guide RTL, il devrait être similaire : https://material-ui.com/guides/right-to-left/#3-jss-rtl .

@guiihlopes Je vous encourage à suivre le guide RTL, il devrait être similaire : https://material-ui.com/guides/right-to-left/#3-jss-rtl .

Cool... J'ai essayé de suivre le même guide et je suis coincé dans :

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()],
    };
  }

J'ai également utilisé le guide suivant : https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js

Idk pourquoi ça ne marche pas, ServerStyleSheets passe les options à StylesProvider et ça devrait marcher, non ?
https://github.com/mui-org/material-ui/blob/master/packages/material-ui-styles/src/ServerStyleSheets/ServerStyleSheets.js#L24

Pourriez-vous @oliviertassinari me donner une idée de la raison pour laquelle cela ne fonctionne pas correctement ?

@guiihlopes changez l'ordre de vos plugins et mettez jssExtend avant les presets. ;)

@guiihlopes changez l'ordre de vos plugins et mettez jssExtend avant les presets. ;)

J'ai déjà essayé, ça ne marche toujours pas... :/

Bien que l'on puisse ajouter un plug-in d'extension au StyleProvider , les définitions de type TS pour le style JSS dans MUI ne permettent pas la syntaxe d'extension.

Bien que l'on puisse ajouter un plug-in d'extension au StyleProvider , les définitions de type TS pour le style JSS dans MUI ne permettent pas la syntaxe d'extension.

Je suppose que @mifrej a raison. J'ai essayé presque toutes les méthodes mentionnées ici, mais aucune ne fonctionne plus. Peut-être qu'ils travaillaient avant !