Material-ui: دعم JSS تمديد البرنامج المساعد بشكل افتراضي

tdkn هل تقوم بتحميل البرنامج المساعد jss-extension؟ https://github.com/cssinjs/react-jss#custom -setup

تضمين التغريدة
شكرا
أصلحته على النحو التالي.
لكن هذا موثق بالتفصيل ؟ :خائب الامل:

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-extension ليس جزءًا من 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

تضمين التغريدة kof؟

tdkn شكرا على ردود الفعل. أقوم بإضافة التغيير إلى جزء التغيير الكسر من سجل التغيير.

• [core] تقليل حجم الحزمة بمقدار 2 كيلو بايت مضغوط (# 9129)oliviertassinari
  لقد أزلنا:
  
  
  
  • jss-expand (1.3 كيلوبايت)
  
  
  • jss- يؤلف (426 ب)
  
  
  • jss-extend (702 ب)
  
  
  • قالب jss (330 ب)
  
  

نحتاج أن نذكر كيف يمكن للمستخدم تخصيص مثيل JSS في أماكن متعددة ، لأنه من خلال هذا التحسين ، جعلنا العديد من المستخدمين يواجهون هذه المشكلة ومشكلات مماثلة (ما زلنا غير مقتنعين بأن الأمر يستحق ذلك)

kof أعتقد أنك قد تكون على حق: # 9335

kof أعتقد أننا بحاجة لرؤية هذا كتجربة. كانت استراتيجيتي هي الانتظار والترقب. إذا اشتكى الأشخاص من ذلك ، فإننا نضيف المكونات الإضافية التي فاتتهم.

بالنسبة لي ، الأمر كله يتعلق بالمؤلفات

kof أعتقد أننا بحاجة لرؤية هذا كتجربة. كانت استراتيجيتي هي الانتظار والترقب. إذا اشتكى الأشخاص من ذلك ، فإننا نضيف المكونات الإضافية التي فاتتهم.

يشبه في الأساس انتظار المستخدم الأول الذي يشكو من عدم وجود مكون إضافي يستخدمه ، فلن تنتهي أبدًا من هذه التجربة هههه

تبدو "الإنشاءات" كحل جيد لحل مشكلة ورقة الأنماط المشتركة "

دوه! oallouch نفسه هنا: كنت متأكدًا من أن mui كانت تستخدم jss-preset-default ولكن بعد ذلك عثرت على هذا.
كنت أحاول استخدام compose أو extend .
olegberman هل كان هذا الإزالة يستحق إذا كان لـ 2 كيلو بايت gzipped بعد كل شيء؟ 🤔

oliviertassinari قال لك

لقد قمنا بتحديث الوثائق لتعكس هذا التغيير.

واجهت نفس المشكلة ، محاولًا استخدام ملحق الامتداد الإضافي.
حاولت متابعة هذا: https://material-ui-next.com/guides/right-to-left/#3 -jss-rtl
لكني أستخدم العرض من جانب الخادم ولم أتمكن من جعله يعمل.

ملاحظة: لست متأكدًا من أنه كان من المفيد إزالة هذه المكونات الإضافية لـ 2 كيلوبايت لأن هذه ميزات رائعة حقًا يجب على الجميع استخدامها 😁

أنا ثانيًا أن التوسيع والتكوين هي أدوات أساسية IMHO في JSS ولا تساوي 2 كيلوبايت.

يجب تحديد مقدار وقت تشغيل العرض الزائد. لا يتعلق الأمر فقط بحجم الحزمة.

لا يزال الأمر اختياريًا بالنسبة لـ mui ، لذلك إذا وجدت أنه يزيد من النفقات العامة ، فيمكنك الاستمرار في استخدام مكتبة classNames وعامل الانتشار ، على الرغم من أنه لن يحدث فرقًا كبيرًا.

كنت أحاول تمكين المكون الإضافي jss-extension بالطريقة الدقيقة التي يجب بها تمكين المكون الإضافي jss-rtl وفقًا للمستندات. نفس الكود ، لكنني استبدلت جميع المكالمات المتعلقة بالمكون الإضافي بـ jss-extend واحد. ولكن من دون نجاح. القواعد التي ينبغي تمديدها في الواقع لا تتأثر. هل يمكن لأي شخص أن يصنعها في النهاية؟

اللعنة ، قضى نصف اليوم الأخير في كيفية استخدام jss-extension في material-ui ، مع وجود هذا المثال في مكان ما:
cssLabel: { "&$cssFocused": { color: grey[500] } }, cssFocused: { backgroundColor: blue[500] },
حيث أعتقد أن "&$cssFocused سيكون مثل الامتداد: cssFocused. لكنها ليست كذلك. فكيف نفعل ذلك ؟

nsaubi ، أنت تتحدث عن وظيفة التداخل ، & يتم استبدالها بمحدد القاعدة المحتوي ، كما هو الحال في sass.

أي معلومات حول ما إذا كان jss-extension / compose سيصبح معيارًا في المستقبل؟

آمل أن يتم تمديده لأنه يساعد في جعل كود jss يبدو أنظف imo.

++ (1)

2 كيلو بايت لا يهم حقًا. أعتقد أن إنشاء نمط تشفير جيد باستخدام "التمديد والتكوين" هو أكثر أهمية للمستقبل.
oliviertassinari هل يمكنك التقييم لإضافتهم مرة أخرى ، وفي الواقع ، لإضافة الدعم الكامل لهم؟

gitsupersmecher يمكنك بالفعل الحصول على دعم كامل لـ "extension and compose" عن طريق إضافة المكون الإضافي إلى JSS باستخدام المكون JssProvider . يمكن لمعظم الناس التعايش بدونها. تعد زيادة الحزمة + 2 كيلو بايت جانبًا واحدًا من المشكلة ، بينما تعد تكلفة وقت التشغيل هي الأخرى.

أعتقد أن تكلفة وقت التشغيل تكاد تكون غير ملحوظة لهؤلاء 2. وأعتقد أيضًا أنه من المفيد إضافة بضعة كيلوبايت لهذا ، لأننا جعلنا التصميم جزءًا من واجهة برمجة التطبيقات العامة وهذه أشياء شائعة جدًا للقيام بها.

ومع ذلك ، بدلاً من الامتداد ، يمكن استخدام عامل تشغيل الانتشار ، والذي يغطي معظم الحالات ويمكن إجراء التكوين داخل أحد المكونات عن طريق ربط className.

: +1: عند إعادة إضافة هذين (تمديد وتأليف). إنها بالتأكيد تستحق كل هذا العناء مقابل مجرد 2 كيلوبايت IMO.

خيار آخر هو إخفاء مثيل jss الداخلي وتوضيح كيفية استخدام إعداد jss الخاص للتصميم.

مرحبًا ، أنا أحاول إضافة jss-extension في مشروع nextjs ، (باستخدام مثال المكون الإضافي jss-rtl) دون نجاح. شخص ما يمكن أن يجعله يعمل؟

^ يود أن يعرف أيضًا

هنا أنشر ما أفعله. لا أعرف كيفية تنفيذ createClassName لأنه في المثال nextjs مستخدم بالفعل.

مع الأخذ في الاعتبار هذا المثال:
https://github.com/mui-org/material-ui/tree/master/examples/nextjs

قم أولاً بتثبيت jss-extension
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 وإضافة jssExtend بترتيب خاطئ. بدلاً من ذلك ، يمكنك استخدام مثيل jss من رد فعل-jss الذي تم بالفعل تطبيق جميع الإعدادات المسبقة: استيراد {jss} من "رد فعل- jss" أو استيراد الإعداد المسبق الافتراضي من http://cssinjs.org/jss-preset-default؟v = v4.5.0

فقط واجهت هذه المشكلة. اعتقد أيضًا أنه كان يجب أن يكون في مكانه بشكل افتراضي.

أود أن أزعم أنه يجب أيضًا أن يتم تطبيقه بشكل افتراضي على أساس أن منطقoliviertassinari من المحتمل ألا يكون قويًا بدرجة كافية. جزئيًا ، لأنه إذا لم يتم تشجيع التمديد / الإنشاء ، فهناك فرصة جيدة لأن تنتهي قاعدة الشفرة بنفخ إضافي من CSS غير الضروري - مما قد يؤدي أيضًا إلى معالجة غير ضرورية. ربما ليس ضارًا مثل 2 كيلو بايت وربما ليس بنفس القدر من المعالجة مثل التوسيع / ​​الإنشاء ، لكن صيانة الكود تعد أيضًا عاملاً هنا. في الختام ، قد لا يكون تفكيري قويًا أيضًا ، ولكن في ظل وجود تفكير غير قوي للخيارات المطروحة ... أقول أعط الجمهور ما يريدون! :د

أوافق على أنه يجب تضمين التوسيع والتأليف بشكل افتراضي. إنها وظائف أساسية وسبب استخدامي لـ JSS. أرغب في رؤيتها تتم إعادة إضافتها ، حيث من المحتمل أن تستخدمها حتى المشاريع الصغيرة والتثبيت المخصص طويل جدًا نسبيًا.

AdamWhitehurst هل يمكنك التصويت على المشكلة؟ سيساعدنا ذلك في إجراء مقايضة أفضل :).

أعتقد أنه يتعين علينا مراعاة الأبعاد المرجحة التالية:

• عدد الأصوات المؤيدة / المشاركين في المحادثة.
• تكلفة وقت التشغيل:؟ (هل يمكن لأي شخص تشغيل جناحنا المعياري به؟)
• تكلفة حجم الباقة: 613 ب . تدور مشكلة هذا البعد حول تكلفة X لاستخدام أحد مكوناتنا فقط ، مثل Modal.

في النهاية ، يمكننا إجراء استطلاع على Twitter لذلك 🤔.

تكلفة وقت التشغيل إذا كان لديك ملحقات تمديد / إنشاء مثبتة هي 0 تقريبًا ، فهي تحقق إذا تم تحديد خاصية extend أو composes ، إذا لم تكن كذلك - فهي لا تفعل شيئًا

كليا ، لقد قمت بالتصويت على المنشور الأول ، هل هذا ما تعنيه؟ أنا جديد نوعًا ما على كل هذا ، لذا تحملني ، هاها.

خذ تصويتي كذلك

قد يكون هناك اعتبار آخر هو مدى كفاءة الحلول. مثال من الكود الخاص بي:

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

ماذا ستكون تكلفة القيام بهذا الحل البديل؟

أي أخبار عن هذا الموضوع للتمديد والتأليف؟ مثل الآخرين ، لم أتمكن أيضًا من متابعة المستندات لتثبيت مكونات إضافية منفصلة. حتى أنني قمت بنسخ المثال ولكني واجهت مشكلات مع StylesProvider.

gabrielliwerant من السهل إضافة ملحقات جديدة. إذا فشلت واجهة المستخدم المادية في التنفيذ على ذلك ، فعلينا التركيز على هذه المشكلة.

أنا أغلق لأننا أضفنا بالفعل التصنيف wait for upvotes .

تضمين التغريدة

الأحدث حاليًا في: 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>
        );
    }

تضمين التغريدة

الأحدث حاليًا في: 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-extension ، لا تعمل جميع المكونات الإضافية المضمنة ( ... jssPreset ().plugins ) ، كما لو لم تكن موجودة. واجهة المستخدم المادية v4.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 أيضًا؟ يبدو أن التوثيق قديم بعض الشيء ، ولدي حل يتوقف عن العمل مع التمديد والتكوين.
أفترض أن هذا بسبب بعض التغيير في السياق. هكذا يبدو الرمز الخاص بي مثل:

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 هل هناك أي مثال على كيفية إضافة ملحقات JSS مخصصة مثل jss-extend مع nextJS؟

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 ، فإن تعريفات النوع TS لتصميم JSS في MUI لا تسمح بتمديد بناء الجملة.

على الرغم من أنه يمكن للمرء إضافة ملحق إضافي إلى StyleProvider ، فإن تعريفات النوع TS لتصميم JSS في MUI لا تسمح بتمديد بناء الجملة.

أعتقد أن mifrej على حق. لقد جربت جميع الطرق المذكورة هنا تقريبًا ولكن لم يعد أي منها يعمل. ربما اعتادوا على العمل من قبل!