Material-ui: デフォルトでJSS拡張プラグインをサポート

@tdkn jss-extendプラグインをロードしていますか？ https://github.com/cssinjs/react-jss#custom -setup

@mbrookes
ありがとう👍
以下のように修正しました。
しかし、これは詳細に文書化されていますか？ ：残念だった：

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

しかし、jss-extendは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良い点。 @kof？

@tdknフィードバックをありがとう。 変更ログの重大な変更部分に変更を追加しています。

• [コア]バンドルサイズを2kBgzipで圧縮（＃9129）@oliviertassinari
  削除しました：
  
  
  
  • jss-expand （1.3 kB）
  
  
  • jss-compose （426 B）
  
  
  • jss-extend （702 B）
  
  
  • jss-template （330 B）
  
  

この最適化により、多くのユーザーがこの問題や同様の問題に遭遇するようになったため、ユーザーが複数の場所でJSSインスタンスをカスタマイズする方法について言及する必要があります（それでも価値があるとは確信していません）

@kofあなたは正しいかもしれないと思います：＃9335

@kofこれを実験として見る必要があると思います。 私の戦略は、待って見ることでした。 人々が不満を言うなら、私たちは彼らが見逃しているプラ​​グインを追加します。

私にとって、それはすべて作曲についてです

@kofこれを実験として見る必要があると思います。 私の戦略は、待って見ることでした。 人々が不満を言うなら、私たちは彼らが見逃しているプラ​​グインを追加します。

基本的には、使用しているプラ​​グインがないことについて最初のユーザーが不満を言うのを待つようなものです。この実験を終了することは決してありません。

「作成」は、共有スタイルシートの問題を解決するための優れたソリューションのように見えます」

ドー！ @oallouchはここでも同じです：muiがjss-preset-defaultを使用していると確信していましたが、それから私はこれに遭遇しました。
composeまたはextendを使おうとしていました。
@olegbermanは、結局2kbでgzip圧縮された場合、この削除の価値はありましたか？ 🤔

@oliviertassinariはあなたに言った

この変更を反映するためにドキュメントを更新しました。

拡張プラグインを使用しようとして、同じ問題が発生しました。
私はこれをフォローしようとしました： https ：//material-ui-next.com/guides/right-to-left/#3 -jss-rtl
しかし、私はサーバー側のレンダリングを使用していて、それを機能させることができませんでした。

PS：これらのプラグインを2kbで削除する価値があるかどうかはわかりません。これらは、誰もが使用する必要のある本当に素晴らしい機能だからです😁

次に、拡張と作成はJSSのIMHOに不可欠なツールであり、2kbの価値はありません。

レンダリングランタイムのオーバーヘッドを定量化する必要があります。 バンドルサイズだけではありません。

muiの場合はまだオプションなので、オーバーヘッドが増えることがわかった場合は、classNamesライブラリとspread演算子を引き続き使用できますが、それほど大きな違いはないと思います。

ドキュメントに従ってjss-rtlプラグインを有効にするのとまったく同じ方法でjss-extendプラグインを有効にしようとしていました。 同じコードですが、プラグインに関連するすべてのjss-extend呼び出しを置き換えました。 しかし、成功しませんでした。 実際に拡張する必要のあるルールは影響を受けません。 誰かが最終的にそれを成し遂げることができたでしょうか？

くそー、最後の半日はjss-extendをmaterial-uiで使用する方法に費やしました。この例は、どこかにあります。
cssLabel: { "&$cssFocused": { color: grey[500] } }, cssFocused: { backgroundColor: blue[500] },
ここで、 "&$cssFocusedはextendのようになります：cssFocused。 しかし、そうではありません。 それで、それをどのように行うのですか？

@nsaubiはネスト機能について話していて、sassと同じように、包含ルールセレクターに置き換えられています。

jss-extend / composeが将来標準になるかどうかについての情報はありますか？

jssコードをよりクリーンなimoに見せるために、extendが元に戻ることを願っています。

++（1）

2kbは実際には重要ではありません。 将来的には、「拡張して構成する」という優れたコーディングパターンを確立することがより重要だと思います。
@oliviertassinariそれらを追加し直して、実際にそれらの完全なサポートを追加することを評価していただけますか？

@gitsupersmecher JssProviderコンポーネントを使用してプラグインをJSSに追加することにより、「拡張および作成」を完全にサポートできます。 ほとんどの人はなしでうまくやっていくことができます。 + 2kbバンドルの増加は問題の一方の側面であり、実行時のコストはもう一方の側面です。

これら2の場合、実行時のコストはほとんど目立たないと思います。また、パブリックAPIの一部としてスタイリングを作成し、非常に人気のあることなので、これに数kbを追加する価値があると思います。

ただし、extendの代わりに、spread演算子を使用できます。これはほとんどの場合をカバーし、classNameを連結することでコンポーネント内で構成を行うことができます。

：+1：これら2つを再度追加すると（拡張と作成）。 たった2KBのIMOで間違いなく価値があります。

もう1つのオプションは、内部jssインスタンスを実際に非表示にし、スタイル設定に独自のjssセットアップを使用する方法を非常に明確にすることです。

こんにちは、nextjsプロジェクトにjss-extendを追加しようとしていますが（jss-rtlプラグインの例を使用）、成功しませんでした。 誰かがそれを機能させることができますか？

^も知りたい

ここに私がしていることを投稿します。 nextjsの例ではすでに使用されているため、generateClassNameを実装する方法がわかりません。

この例をベースにすると：
https://github.com/mui-org/material-ui/tree/master/examples/nextjs

最初に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;

エクステンドバックを追加する予定はありますか？

https://material-ui.com/guides/right-to-left/#3 -jss-rtlのガイドに従っていて、rtlを拡張するように変更しましたが、機能しません。 理由について何か洞察はありますか？

私はこれを行っていますが、プラグインがロードされていません（v3.2.2）
何か案は？

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

プラグインを正しい順序で設定する必要があります。http：//cssinjs.org/plugins？ v = v9.8.7

mui用に作成された.aプリセットを使用していて、jssExtendを間違った順序で追加しています。 代わりに、すでにすべてのプリセットが適用されているreact-jssのjssインスタンスを使用できます。「react-jss」から{jss}をインポートするか、 http： //cssinjs.org/jss-preset-default？vからデフォルトのプリセットをインポートします。

この問題が発生しただけです。 また、デフォルトでインプレースになっているはずだと信じています。

@oliviertassinariの推論が十分に強力ではない可能性があることに基づいて、デフォルトでも設定する必要があると私は主張します。 一部には、拡張/作成が推奨されていない場合、コードベースが不要なCSSによる追加の肥大化で終了する可能性が高く、これも不要な処理につながる可能性があります。 おそらく2kbほど有害ではなく、extend / composeほど処理が少ないかもしれませんが、コードのメンテナンスもここでの要因です。 結論として、私の推論もそれほど強力ではないかもしれませんが、手元にあるオプションについてそれほど強力な推論がない場合は...群衆に彼らが望むものを与えると言います！ ：D

私は、extendとcomposeがデフォルトで含まれるべきであることに同意します。 それらはそのような基本的な機能であり、私がJSSを使用する理由です。 小さなプロジェクトでもそれらを使用する可能性が高く、カスタムインストールは比較的長いので、それらが再度追加されるのを楽しみにしています。

@AdamWhitehurstこの問題に賛成してもらえますか？ それは私たちがより良いトレードオフをするのを助けるでしょう:)。

次の重み付きディメンションを考慮する必要があると思います。

• 会話への賛成票/参加者の数。
• 実行時のコスト：？ （誰かがそれを使ってベンチマークスイートを実行できますか？）
• バンドルサイズのコスト： 613B 。 このディメンションの問題は、Xがモーダルなどのコンポーネントの1つのみを使用するためのコストに関するものです。

最終的には、Twitterの投票を実行することができます🤔。

拡張/作成プラグインがインストールされている場合の実行時コストはほぼ0であり、 extendまたはcomposesプロパティが定義されているかどうかをチェックします。定義されていない場合は、何もしません。

全体的に、私は最初の投稿に賛成しました、それはあなたが意味することですか？ 私はこれらすべてに少し慣れていないので、我慢してください、ハハ。

私の賛成票も取ります

もう1つの考慮事項は、パフォーマンスの回避策の程度です。 私のコードからの例：

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

この回避策を実行するためのコストはどのくらいですか？

拡張と作成に関するこの問題に関するニュースはありますか？ 他の人と同じように、私もドキュメントに従って個別のプラグインをインストールすることができませんでした。 例をコピーしましたが、StylesProviderで問題が発生しました。

@gabrielliwerant新しいプラグインを簡単に追加できるはずです。 Material-UIがその上で実行に失敗した場合は、この問題に焦点を当てる必要があります。

wait for upvotesラベルをすでに追加しているので、終了します。

@gabrielliwerant

最新のものは現在次の場所にあります： 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()],
});

次に、このようなものは十分に機能するようです...

    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

最新のものは現在次の場所にあります： 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()],
});

次に、このようなものは十分に機能するようです...

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

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

このソリューションを試しましたが、このバージョンではjss-plugin-extendのみが機能し、すべての組み込みプラグイン（ ... jssPreset ().plugins ）が存在しないかのように機能しません。 マテリアル-uiv4.5、jss v10

これは私のために働く解決策です：

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"

こんにちはみんな、MuiThemeProviderを使用してjssプラグインを使用することも可能ですか？ ドキュメントは少し古いようですが、extendとcomposeの動作を停止するソリューションがあります。
それは文脈の変化によるものだと思います。 これは私のコードがどのように見えるかです：

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

はい、可能です。これは、ライブラリの右から左へのサポートの要件です。

@oliviertassinari nextJSでjss-extendのようなカスタムJSSプラグインを追加する方法の例はありますか？

@guiihlopes RTLガイドに従うことをお勧めします。https ：//material-ui.com/guides/right-to-left/#3-jss-rtlのようになります。

@guiihlopes RTLガイドに従うことをお勧めします。https ：//material-ui.com/guides/right-to-left/#3-jss-rtlのようになります。

かっこいい...私は同じガイドに従おうとしました、そして私は立ち往生しています：

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

次のガイドも使用しました： https ：//github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js

Idkなぜそれが機能しないのか、 ServerStyleSheetsはオプションをStylesProviderに渡し、それは機能するはずですよね？
https://github.com/mui-org/material-ui/blob/master/packages/material-ui-styles/src/ServerStyleSheets/ServerStyleSheets.js#L24

@oliviertassinariで、正しく機能しない理由を教えていただけますか？

@guiihlopesはプラグインの順序を変更し、プリセットの前にjssExtendを配置します。 ;）

@guiihlopesはプラグインの順序を変更し、プリセットの前にjssExtendを配置します。 ;）

私はすでに試しましたが、まだ機能していません...：/

StyleProviderにextendプラグインを追加することはできますが、MUIでのJSSスタイリングの型定義TSでは、extend構文を使用できません。

StyleProviderにextendプラグインを追加することはできますが、MUIでのJSSスタイリングの型定義TSでは、extend構文を使用できません。

@mifrejは正しいと思います。 私はここで言及されているほとんどすべての方法を試しましたが、それらのどれももう機能しません。 たぶん彼らは以前働いていたのだろう！