Material-ui: Mendukung plugin perpanjangan JSS secara default

@tdkn Apakah Anda memuat plugin jss-extend? https://github.com/cssinjs/react-jss#custom -setup

@mbrookes
Terima kasih👍
Saya memperbaikinya seperti di bawah ini.
Tapi, ini didokumentasikan secara rinci ? :kecewa:

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

Tapi jss-extend bukan bagian dari 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 Poin bagus. @kof?

@tdkn Terima kasih atas umpan baliknya. Saya menambahkan perubahan ke bagian perubahan yang melanggar dari log perubahan.

• [core] Kurangi ukuran bundel sebesar 2kB gzip (#9129) @oliviertasinari
  Kami telah menghapus:
  
  
  
  • jss-perluas (1,3 kB)
  
  
  • jss-compose (426 B)
  
  
  • jss-memperpanjang (702 B)
  
  
  • jss-templat (330 B)
  
  

Kami perlu menyebutkan bagaimana pengguna dapat menyesuaikan contoh JSS di banyak tempat, karena melalui pengoptimalan ini, kami membuat banyak pengguna mengalami masalah ini dan masalah serupa (masih belum yakin itu sepadan)

@kof Saya pikir Anda mungkin benar: #9335

@kof Saya pikir kita perlu melihat ini sebagai eksperimen. Strategi saya adalah menunggu dan melihat. Jika orang mengeluh, maka kami menambahkan plugin yang mereka lewatkan.

bagi saya, ini semua tentang komposisi

@kof Saya pikir kita perlu melihat ini sebagai eksperimen. Strategi saya adalah menunggu dan melihat. Jika orang mengeluh, maka kami menambahkan plugin yang mereka lewatkan.

Ini pada dasarnya seperti menunggu pengguna pertama yang mengeluh tentang tidak adanya plugin yang dia gunakan, Anda tidak akan pernah menyelesaikan eksperimen ini haha

"Menulis" sepertinya solusi yang baik untuk menyelesaikan masalah lembar gaya bersama"

Doh! @oallouch sama di sini: Saya yakin mui menggunakan jss-preset-default tetapi kemudian saya menemukan ini.
Saya mencoba menggunakan compose atau extend .
@olegberman apakah penghapusan ini layak jika untuk 2kb gzip? 🤔.

@oliviertasinari bilang ya

Kami telah memperbarui dokumentasi untuk mencerminkan perubahan ini.

Saya mengalami masalah yang sama, mencoba menggunakan plugin perluasan.
Saya mencoba mengikuti ini: https://material-ui-next.com/guides/right-to-left/#3 -jss-rtl
tetapi saya menggunakan rendering sisi server dan saya tidak dapat membuatnya berfungsi.

PS: Tidak yakin menghapus plugin ini untuk 2kb karena ini adalah fitur luar biasa yang harus digunakan semua orang 😁

Saya kedua, memperluas dan menulis adalah alat penting IMHO di JSS dan tidak sebanding dengan 2kb.

Overhead runtime rendering perlu diukur. Ini bukan hanya tentang ukuran bundel.

Ini masih opsional untuk mui, jadi jika Anda merasa bahwa itu meningkatkan overhead, Anda dapat tetap menggunakan perpustakaan classNames dan operator spread, saya pikir itu tidak akan membuat banyak perbedaan.

Saya mencoba mengaktifkan plugin jss-extend dengan cara yang persis sama dengan plugin jss-rtl yang harus diaktifkan menurut dokumen. Kode yang sama, tetapi saya telah mengganti semua panggilan terkait plugin menjadi jss-extend. Tapi tanpa keberhasilan. Aturan yang seharusnya diperpanjang sebenarnya tidak terpengaruh. Mungkinkah ada yang berhasil pada akhirnya?

Sial, setengah hari terakhir dihabiskan untuk cara menggunakan jss-extend di material-ui, dengan contoh ini ditemukan di suatu tempat:
cssLabel: { "&$cssFocused": { color: grey[500] } }, cssFocused: { backgroundColor: blue[500] },
di mana saya pikir "&$cssFocused akan seperti extend: cssFocused. Tapi tidak. Jadi bagaimana melakukannya?

@nsaubi Anda berbicara tentang fungsionalitas bersarang, & digantikan oleh pemilih aturan yang mengandung, sama seperti di sass.

Adakah info apakah jss-extend/compose akan menjadi standar di masa mendatang?

Saya harap extend membuatnya kembali karena membantu membuat kode jss terlihat lebih bersih.

++ (1)

2kb tidak terlalu penting. Saya pikir membangun pola pengkodean yang baik dengan "perpanjang dan tulis" lebih penting untuk masa depan.
@oliviertasinari Bisakah Anda mengevaluasi untuk menambahkannya kembali, dan sebenarnya, untuk menambahkan dukungan penuh untuk mereka?

@gitsupersmecher Anda sudah dapat memiliki dukungan penuh untuk "memperpanjang dan menulis" dengan menambahkan plugin ke JSS dengan komponen JssProvider . Kebanyakan orang bisa bergaul tanpa. Peningkatan bundel +2kb adalah satu sisi masalah, biaya runtime adalah sisi lainnya.

Saya pikir biaya runtime hampir tidak terlihat untuk 2. Saya juga berpikir perlu menambahkan beberapa kb untuk ini, karena kami membuat bagian styling dari api publik dan itu adalah hal yang sangat populer untuk dilakukan.

Namun alih-alih memperpanjang, seseorang dapat menggunakan operator spread, yang mencakup sebagian besar kasus dan komposisi dapat dilakukan di dalam komponen dengan menggabungkan className.

:+1: saat menambahkan kembali keduanya (perpanjang dan tulis). Mereka pasti layak untuk hanya 2KB IMO.

opsi lain adalah benar-benar menyembunyikan instance jss internal dan memperjelas cara menggunakan pengaturan jss sendiri untuk penataan.

Hai, saya mencoba menambahkan jss-extend di proyek nextjs, (menggunakan contoh plugin jss-rtl) tidak berhasil. Seseorang dapat membuatnya bekerja?

^ ingin tahu juga

Di sini saya memposting apa yang saya lakukan. saya tidak tahu bagaimana menerapkan generateClassName karena dalam contoh nextjs sudah digunakan.

Mengambil sebagai dasar contoh ini:
https://github.com/mui-org/material-ui/tree/master/examples/nextjs

Pertama instal 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;

Apakah ada rencana untuk menambahkan perpanjangan kembali?

Saya mengikuti panduan di https://material-ui.com/guides/right-to-left/#3 -jss-rtl, dan mengubah rtl untuk diperpanjang, tetapi tidak berhasil. Setiap wawasan tentang mengapa?

Saya melakukan ini dan plugin tidak memuat (v3.2.2)
Ada ide?

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

Anda harus mengatur plugin dalam urutan yang benar, http://cssinjs.org/plugins?v=v9.8.7

Anda menggunakan .a preset yang dibuat untuk mui dan menambahkan jssExtend dalam urutan yang salah. Sebagai gantinya, Anda dapat menggunakan instance jss dari react-jss yang telah menerapkan semua preset: import {jss} dari "react-jss" atau impor preset default dari http://cssinjs.org/jss-preset-default?v =v4.5.0

Hanya mengalami masalah ini. Juga percaya itu seharusnya sudah ada secara default.

Saya berpendapat bahwa itu juga harus ada secara default atas dasar bahwa alasan @olivietassinari kemungkinan tidak cukup kuat. Sebagian, karena jika perluasan/penulisan tidak dianjurkan, ada kemungkinan besar basis kode akan berakhir dengan pengasapan tambahan dari CSS yang tidak perlu — yang juga dapat menyebabkan pemrosesan yang tidak perlu. Mungkin tidak berbahaya seperti 2kb dan mungkin tidak sebanyak pemrosesan yang dilakukan oleh perluasan/penulisan, tetapi pemeliharaan kode juga merupakan faktor di sini. Kesimpulannya, alasan saya mungkin tidak terlalu kuat, tetapi dengan adanya alasan yang tidak terlalu kuat untuk opsi yang ada... Saya katakan berikan apa yang mereka inginkan kepada orang banyak! :D

Saya setuju bahwa perluasan dan penulisan harus disertakan secara default. Mereka adalah fungsi mendasar dan alasan saya menggunakan JSS. Saya ingin melihat mereka ditambahkan kembali, karena bahkan proyek kecil pun kemungkinan akan menggunakannya dan pemasangan khusus relatif lama.

@AdamWhitehurst Bisakah Anda memperbaiki masalah ini? Ini akan membantu kami membuat tradeoff yang lebih baik :).

Saya pikir kita harus mempertimbangkan dimensi tertimbang berikut:

• jumlah upvotes/peserta percakapan.
• biaya runtime: ? (dapatkah seseorang menjalankan suite benchmark kami dengannya?)
• biaya ukuran bundel: 613 B . Masalah dengan dimensi ini adalah seputar biaya untuk X hanya menggunakan salah satu komponen kami, seperti Modal.

Akhirnya, kita bisa menjalankan polling Twitter untuk itu .

biaya runtime jika Anda menginstal plugin perluasan/penulisan hampir 0, ini adalah pemeriksaan apakah properti extend atau composes ditentukan, jika tidak - tidak melakukan apa-apa

Benar-benar, saya upvote posting pertama, apakah itu yang Anda maksud? Saya agak baru untuk semua ini, jadi bersabarlah, haha.

Ambil upvote saya juga

Pertimbangan lain mungkin adalah bagaimana kinerjanya. Contoh dari kode saya:

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

Berapa biaya untuk melakukan solusi ini?

Adakah berita tentang masalah ini untuk diperpanjang dan ditulis? Seperti yang lain, saya juga tidak dapat mengikuti dokumen untuk menginstal plugin terpisah. Saya bahkan menyalin contoh tetapi mengalami masalah dengan StylesProvider.

@gabrielliwerant Seharusnya mudah untuk menambahkan plugin baru. Jika Material-UI gagal mengeksekusinya maka kita harus fokus pada masalah ini.

Saya menutup karena kami telah menambahkan label wait for upvotes .

@gabrielliwerant

Terbaru saat ini di: 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()],
});

Kemudian sesuatu seperti ini tampaknya bekerja cukup baik ...

    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

Terbaru saat ini di: 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()],
});

Kemudian sesuatu seperti ini tampaknya bekerja cukup baik ...

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

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

Saya mencoba solusi ini, tetapi dalam versi ini hanya jss-plugin-extend yang berfungsi, semua plugin bawaan ( ... jssPreset ().plugins ) tidak berfungsi, seolah-olah tidak ada. materi-ui v4.5, jss v10

Ini adalah solusi yang bekerja untuk saya:

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"

Hai teman-teman, apakah mungkin menggunakan MuiThemeProvider dan menggunakan plugin jss juga? Dokumentasinya tampaknya agak lama, dan saya punya solusi yang berhenti bekerja dengan perluasan dan penulisan.
Saya kira itu karena beberapa perubahan konteks. Ini adalah bagaimana kode saya terlihat seperti:

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

Ya, itu mungkin, itu persyaratan dukungan kanan-ke-kiri untuk perpustakaan.

@olivietassinari apakah ada contoh cara menambahkan plugin JSS khusus seperti jss-extend dengan nextJS?

@guiihlopes Saya akan mendorong untuk mengikuti panduan RTL, itu harus serupa: https://material-ui.com/guides/right-to-left/#3 -jss-rtl.

@guiihlopes Saya akan mendorong untuk mengikuti panduan RTL, itu harus serupa: https://material-ui.com/guides/right-to-left/#3 -jss-rtl.

Keren ... Saya mencoba mengikuti panduan yang sama dan saya terjebak di:

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

Saya juga telah menggunakan panduan berikut: https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js

Entah mengapa itu tidak berfungsi, ServerStyleSheets meneruskan opsi ke StylesProvider dan itu seharusnya berfungsi, bukan?
https://github.com/mui-org/material-ui/blob/master/packages/material-ui-styles/src/ServerStyleSheets/ServerStyleSheets.js#L24

Bisakah Anda @olivietassinari memberi saya beberapa ide mengapa itu tidak berfungsi dengan baik?

@guiihlopes ubah urutan plugin Anda dan letakkan jssExtend sebelum preset. ;)

@guiihlopes ubah urutan plugin Anda dan letakkan jssExtend sebelum preset. ;)

udah ane coba tetep ga bisa... :/

Meskipun seseorang dapat menambahkan plugin perluasan ke StyleProvider , definisi tipe TS untuk penataan JSS di MUI tidak mengizinkan sintaks ekstensi.

Meskipun seseorang dapat menambahkan plugin perluasan ke StyleProvider , definisi tipe TS untuk penataan JSS di MUI tidak mengizinkan sintaks ekstensi.

Saya kira @mifrej benar. Saya telah mencoba hampir semua cara yang disebutkan di sini tetapi tidak ada yang berfungsi lagi. Mungkin mereka dulu bekerja!