Material-ui: Admite el complemento de extensión JSS de forma predeterminada

@tdkn ¿Está cargando el complemento jss-extend? https://github.com/cssinjs/react-jss#personalizado -configuración

@mbrookes
Gracias👍
Lo arreglé como se muestra a continuación.
Pero, ¿esta documentado en detalle ? :decepcionado:

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

¿Pero jss-extend no es parte de 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 Buen punto. @kof?

@tdkn Gracias por los comentarios. Estoy agregando el cambio en la parte de cambios importantes del registro de cambios.

• [núcleo] Reducir el tamaño del paquete en 2kB con gzip (#9129) @oliviertassinari
  Hemos eliminado:
  
  
  
  • jss-expand (1.3 kB)
  
  
  • jss-componer (426 B)
  
  
  • jss-extender (702 B)
  
  
  • jss-plantilla (330 B)
  
  

Necesitamos mencionar cómo el usuario puede personalizar una instancia de JSS en varios lugares, porque a través de esta optimización, hicimos que muchos usuarios se encontraran con este y otros problemas similares (todavía no estamos convencidos de que haya valido la pena)

@kof Creo que puedes tener razón: #9335

@kof Creo que debemos ver esto como un experimento. Mi estrategia era esperar y ver. Si las personas se quejan, agregamos los complementos que extrañan.

para mí, todo se trata de composiciones

@kof Creo que debemos ver esto como un experimento. Mi estrategia era esperar y ver. Si las personas se quejan, agregamos los complementos que extrañan.

Es basicamente como esperar al primer usuario que se queje por la ausencia de un plugin el cual esta usando, nunca terminaras este experimento jaja

"Compone" parece una buena solución para resolver el problema de la hoja de estilo compartida"

¡Do! @oallouch lo mismo aquí: estaba seguro de que mui estaba usando jss-preset-default pero luego me topé con esto.
Estaba tratando de usar compose o extend .
@olegberman , ¿valió la pena esta eliminación si por 2kb se comprimió después de todo? 🤔

@oliviertassinari te lo dijo

Hemos actualizado la documentación para reflejar este cambio.

Me encontré con el mismo problema, tratando de usar el complemento extendido.
Traté de seguir esto: https://material-ui-next.com/guides/right-to-left/#3 -jss-rtl
pero estoy usando la representación del lado del servidor y no pude hacer que funcione.

PD: No estoy seguro de si valió la pena eliminar estos complementos de 2kb, ya que son características realmente increíbles que todos deberían usar 😁

Secundo eso, extender y componer son herramientas esenciales en mi humilde opinión en JSS y no valen los 2kb.

Es necesario cuantificar la sobrecarga del tiempo de ejecución de representación. No se trata solo del tamaño del paquete.

Todavía es opcional para el mui, por lo que si encuentra que aumenta la sobrecarga, puede seguir usando la biblioteca classNames y el operador de distribución, aunque creo que no hará mucha diferencia.

Estaba tratando de habilitar el complemento jss-extend de la manera exacta en que se debe habilitar el complemento jss-rtl de acuerdo con los documentos. El mismo código, pero reemplacé todas las llamadas relacionadas con complementos a jss-extend one. Pero sin éxito. Las reglas que deberían extenderse en realidad no se ven afectadas. ¿Alguien podría haberlo logrado finalmente?

Maldición, la mitad del último día dedicado a cómo usar jss-extend en material-ui, con este ejemplo encontrado en alguna parte:
cssLabel: { "&$cssFocused": { color: grey[500] } }, cssFocused: { backgroundColor: blue[500] },
donde pensé que "&$cssFocused sería como extender: cssFocused. Pero no lo es. Así que cómo se hace ?

@nsaubi , está hablando de la funcionalidad de anidamiento, y se reemplaza por el selector de reglas que contiene, igual que en sass.

¿Alguna información sobre si jss-extend/compose se convertirá en estándar en el futuro?

Espero que extend lo recupere, ya que ayuda a que el código jss se vea más limpio.

++ (1 )

2kb realmente no importa. Creo que establecer un buen patrón de codificación con "extender y componer" es más importante para el futuro.
@oliviertassinari ¿Podría evaluar agregarlos nuevamente y, de hecho, agregar soporte completo para ellos?

@gitsupersmecher Ya puede tener soporte completo para "extender y componer" agregando el complemento a JSS con el componente JssProvider . La mayoría de la gente puede vivir sin ella. El aumento del paquete de +2 kb es un lado del problema, el costo del tiempo de ejecución es el otro.

Creo que el costo del tiempo de ejecución casi no se nota para esos 2. También creo que vale la pena agregar algunos kb para esto, ya que hicimos que el estilo sea parte de la API pública y esas son cosas muy populares para hacer.

Sin embargo, en lugar de extender, se podría usar el operador de extensión, que cubre la mayoría de los casos y la composición se puede hacer dentro de un componente concatenando un nombre de clase.

:+1: al volver a agregar esos dos (extender y componer). Definitivamente valen la pena por solo 2 KB en mi opinión.

otra opción es ocultar realmente la instancia jss interna y dejar muy claro cómo usar la configuración jss propia para el estilo.

Hola, estoy tratando de agregar jss-extend en un proyecto nextjs (usando el ejemplo del complemento jss-rtl) sin éxito. Alguien puede hacer que funcione?

^ también me gustaría saber

Aquí publico lo que hago. No sé cómo implementar generateClassName porque en el ejemplo nextjs ya se usa.

Tomando como base este ejemplo:
https://github.com/mui-org/material-ui/tree/master/examples/nextjs

Primero instale jss-extend
npm i --save jss-extend

/páginas/_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;

¿Hay algún plan para agregar extender hacia atrás?

Estoy siguiendo la guía en https://material-ui.com/guides/right-to-left/#3 -jss-rtl, y cambié el rtl para extender, pero no funciona. ¿Alguna idea de por qué?

Estoy haciendo esto y el complemento no se carga (v3.2.2)
¿Algunas ideas?

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

Debe configurar los complementos en el orden correcto, http://cssinjs.org/plugins?v=v9.8.7

Está utilizando .un ajuste preestablecido creado para mui y está agregando jssExtend en el orden incorrecto. En su lugar, podría usar una instancia jss de react-jss que ya tiene aplicados todos los ajustes preestablecidos: importe {jss} desde "react-jss" o importe el ajuste preestablecido predeterminado de http://cssinjs.org/jss-preset-default?v =v4.5.0

Simplemente encuentre este problema. También creo que debería haber estado en su lugar de forma predeterminada.

Yo diría que también debería estar en su lugar de forma predeterminada sobre la base de que el razonamiento de @oliviertassinari probablemente no sea lo suficientemente sólido. En parte, porque si no se fomenta la extensión/composición, existe una buena posibilidad de que el código base termine con una sobrecarga adicional de CSS innecesario, lo que también podría conducir a un procesamiento innecesario. Tal vez no sea tan dañino como 2kb y tal vez no tenga tanto procesamiento como extender/componer, pero el mantenimiento del código también es un factor aquí. En conclusión, mi razonamiento podría no ser tan sólido tampoco, pero ante la presencia de un razonamiento no tan sólido para las opciones disponibles... ¡Digo que le des a la multitud lo que quiere! :D

Acepto que extender y componer deben incluirse de forma predeterminada. Son funciones tan fundamentales y la razón por la que uso JSS. Me encantaría volver a agregarlos, ya que incluso los proyectos pequeños probablemente los usarán y la instalación personalizada es comparativamente muy larga.

@AdamWhitehurst ¿Podría votar a favor del problema? Nos ayudaría a hacer una mejor compensación :).

Creo que tenemos que considerar las siguientes dimensiones ponderadas:

• el número de votos a favor/participantes en la conversación.
• el costo de tiempo de ejecución: ? (¿alguien puede ejecutar nuestra suite de referencia con él?)
• el tamaño del paquete cuesta: 613 B . El problema con esta dimensión es el costo de que X use solo uno de nuestros componentes, como el Modal.

Eventualmente, podríamos realizar una encuesta de Twitter para ello 🤔.

el costo de tiempo de ejecución si tiene instalados complementos de extensión/composición es casi 0, es una verificación si la propiedad extend o composes está definida, si no, no hace nada

Totalmente, voté a favor de la primera publicación, ¿es eso lo que quieres decir? Soy un poco nuevo en todo esto, así que tengan paciencia conmigo, jaja.

Toma mi voto positivo también

Otra consideración podría ser el rendimiento de las soluciones alternativas. Ejemplo de mi código:

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

¿Cuál sería el costo de hacer esta solución?

¿Alguna noticia sobre este tema para extender y componer? Al igual que otros, tampoco pude seguir los documentos para instalar complementos separados. Incluso copié el ejemplo, pero tuve problemas con StylesProvider.

@gabrielliwerant Debería ser fácil agregar nuevos complementos. Si Material-UI falla al ejecutar eso, entonces deberíamos centrarnos en este problema.

Estoy cerrando porque ya hemos agregado la etiqueta wait for upvotes .

@gabrielliwerant

La última versión se encuentra actualmente en: 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()],
});

Entonces algo como esto parece funcionar bastante 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 última versión se encuentra actualmente en: 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()],
});

Entonces algo como esto parece funcionar bastante 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>
      );
  }

Probé esta solución, pero en esta versión solo funciona jss-plugin-extend, todos los complementos incorporados ( ... jssPreset ().plugins ) no funcionan, como si no estuvieran allí. material-ui v4.5, jss v10

Esta es la solución que funciona para mí:

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"

Hola chicos, ¿es posible usar MuiThemeProvider y usar complementos jss también? La documentación parece ser un poco antigua y tengo una solución que deja de funcionar con extender y componer.
Supongo que será por algún cambio de contexto. Así es como se ve mi código:

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

Sí, es posible, es un requisito del soporte de derecha a izquierda para la biblioteca.

@oliviertassinari , ¿hay algún ejemplo sobre cómo agregar complementos JSS personalizados como jss-extend con nextJS?

@guiihlopes Lo animo a seguir la guía RTL, debería ser similar: https://material-ui.com/guides/right-to-left/#3 -jss-rtl.

@guiihlopes Lo animo a seguir la guía RTL, debería ser similar: https://material-ui.com/guides/right-to-left/#3 -jss-rtl.

Genial... Traté de seguir la misma guía y estoy atascado en:

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

También he usado la siguiente guía: https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js

No sé por qué no funciona, ServerStyleSheets pasa las opciones a StylesProvider y debería funcionar, ¿verdad?
https://github.com/mui-org/material-ui/blob/master/packages/material-ui-styles/src/ServerStyleSheets/ServerStyleSheets.js#L24

¿Podría @oliviertassinari darme alguna idea de por qué no funciona correctamente?

@guiihlopes cambie el orden de sus complementos y coloque jssExtend antes de los ajustes preestablecidos. ;)

@guiihlopes cambie el orden de sus complementos y coloque jssExtend antes de los ajustes preestablecidos. ;)

Ya lo probé, sigue sin funcionar... :/

Aunque se puede agregar un complemento extendido al StyleProvider , las definiciones de tipo TS para el estilo JSS en MUI no permiten la sintaxis extendida.

Aunque se puede agregar un complemento extendido al StyleProvider , las definiciones de tipo TS para el estilo JSS en MUI no permiten la sintaxis extendida.

Supongo que @mifrej tiene razón. He intentado casi todas las formas mencionadas aquí, pero ninguna de ellas funciona. ¡Tal vez solían trabajar antes!