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 Хороший вопрос. @коф?

@tdkn Спасибо за отзыв. Я добавляю изменение в часть журнала изменений, посвященную критическим изменениям.

• [ядро] Уменьшить размер пакета на 2 КБ в сжатом виде (# 9129) @oliviertassinari
  Мы удалили:
  
  
  
  • jss-развернуть (1,3 КБ)
  
  
  • jss-compose (426 Б)
  
  
  • jss-extend (702 Б)
  
  
  • jss-шаблон (330 Б)
  
  

Мы должны упомянуть, как пользователь может настроить экземпляр JSS в нескольких местах, потому что благодаря этой оптимизации мы заставили многих пользователей столкнуться с этой и подобными проблемами (до сих пор не убеждены, что оно того стоило).

@kof Думаю, ты прав: #9335

@kof Я думаю, что нам нужно рассматривать это как эксперимент. Моя стратегия заключалась в том, чтобы подождать и посмотреть. Если люди жалуются, то мы добавляем недостающие плагины.

для меня все дело в сочинениях

@kof Я думаю, что нам нужно рассматривать это как эксперимент. Моя стратегия заключалась в том, чтобы подождать и посмотреть. Если люди жалуются, то мы добавляем недостающие плагины.

По сути, это как ждать первого пользователя, который пожалуется на отсутствие плагина, который он использует, вы никогда не закончите этот эксперимент, ха-ха.

«Composes» выглядит как хорошее решение для решения проблемы с общей таблицей стилей.

Дох! @oallouch , то же самое здесь: я был уверен, что mui использует jss-preset-default , но потом я наткнулся на это.
Я пытался использовать compose или extend .
@olegberman стоило ли это удаление, если в конце концов за 2 КБ было сжато? 🤔

@oliviertassinari сказал тебе

Мы обновили документацию, чтобы отразить это изменение.

Я столкнулся с той же проблемой, пытаясь использовать плагин расширения.
Я пытался следовать этому: https://material-ui-next.com/guides/right-to-left/#3 -jss-rtl
но я использую рендеринг на стороне сервера, и мне не удалось заставить его работать.

PS: Не уверен, что стоило удалять эти плагины за 2кб, так как это действительно классные функции, которыми должен пользоваться каждый 😁

Я во-вторых, расширение и компоновка являются ИМХО важными инструментами в JSS и не стоят 2 КБ.

Накладные расходы времени выполнения рендеринга должны быть определены количественно. Дело не только в размере пакета.

Это по-прежнему необязательно для mui, поэтому, если вы обнаружите, что это увеличивает накладные расходы, вы можете продолжать использовать библиотеку classNames и оператор распространения, хотя я думаю, что это не будет иметь большого значения.

Я пытался включить плагин jss-extend точно так же, как плагин jss-rtl должен быть включен в соответствии с документами. Тот же код, но я заменил все вызовы, связанные с плагином, на jss-extend. Но безуспешно. Правила, которые должны быть расширены, на самом деле не затрагиваются. Мог ли кто-нибудь сделать это в конце концов?

Блин, полдня потратил на то, как использовать jss-extend в material-ui, где-то нашел вот этот пример:
cssLabel: { "&$cssFocused": { color: grey[500] } }, cssFocused: { backgroundColor: blue[500] },
где я думал, что "&$cssFocused будет выглядеть как extend: cssFocused. Но это не так. Итак, как это сделать?

@nsaubi , вы говорите о вложенных функциях, и заменяется содержащим селектор правил, как в sass.

Есть ли информация о том, станет ли jss-extend/compose стандартом в будущем?

Я надеюсь, что расширение вернется, поскольку оно помогает сделать код jss более чистым.

++ (1 )

2кб не имеет значения. Я думаю, что создание хорошего шаблона кодирования с помощью «расширить и составить» более важно для будущего.
@oliviertassinari Не могли бы вы добавить их обратно и, на самом деле, добавить для них полную поддержку?

@gitsupersmecher Вы уже можете получить полную поддержку «расширить и составить», добавив плагин в JSS с компонентом JssProvider . Большинство людей могут обойтись без него. Увеличение пакета +2 КБ — это одна сторона проблемы, а стоимость времени выполнения — другая.

Я думаю, что стоимость времени выполнения почти не заметна для этих двух. Я также думаю, что стоит добавить несколько килобайт для этого, так как мы сделали стилизацию частью публичного API, и это очень популярные вещи.

Однако вместо расширения можно использовать оператор распространения, который охватывает большинство случаев, а композицию можно выполнить внутри компонента путем объединения className.

:+1: при повторном добавлении этих двух (расширить и составить). Они определенно того стоят всего за 2 КБ IMO.

другой вариант - действительно скрыть внутренний экземпляр jss и четко указать, как использовать собственную настройку jss для стилизации.

Привет, я безуспешно пытаюсь добавить jss-extend в проект nextjs (используя пример плагина jss-rtl). Кто-нибудь может заставить его работать?

^ тоже хотел бы знать

Здесь я публикую то, что я делаю. я не знаю, как реализовать generateClassName, потому что в примере nextjs уже используется.

Взяв за основу этот пример:
https://github.com/mui-org/material-ui/tree/master/examples/nextjs

Сначала установите jss-extend
npm i --save jss-extend

/страницы/_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 на extension, но это не работает. Любое понимание того, почему?

Я делаю это, и плагин не загружается (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

Вы используете предустановку .a, созданную для mui, и добавляете jssExtend в неправильном порядке. Вместо этого вы можете использовать экземпляр jss из react-jss, к которому уже применены все предустановки: импортируйте {jss} из "react-jss" или импортируйте предустановку по умолчанию из http://cssinjs.org/jss-preset-default?v =v4.5.0

Просто столкнуться с этой проблемой. Также считаю, что он должен был быть на месте по умолчанию.

Я бы сказал, что он также должен быть установлен по умолчанию на том основании, что рассуждения @oliviertassinari , вероятно, недостаточно сильны. Отчасти потому, что если не поощрять расширение/композицию, велика вероятность того, что кодовая база может закончиться дополнительным раздуванием из-за ненужного CSS, что также может привести к ненужной обработке. Может быть, не так вредно, как 2 КБ, и, возможно, не так много обработки, как расширение/компонование, но обслуживание кода также является фактором здесь. В заключение, моя аргументация может быть и не такой уж сильной, но при наличии не такой сильной аргументации имеющихся вариантов... Я говорю, дайте толпе то, что они хотят! :D

Я согласен с тем, что расширения и компоновки должны быть включены по умолчанию. Это такие фундаментальные функции и причина, по которой я использую JSS. Я бы хотел, чтобы они были снова добавлены, так как даже небольшие проекты, скорее всего, будут их использовать, а пользовательская установка сравнительно длительна.

@AdamWhitehurst Не могли бы вы проголосовать за проблему? Это помогло бы нам сделать лучший компромисс :).

Я думаю, что мы должны рассмотреть следующие взвешенные измерения:

• количество голосов/участников в беседе.
• стоимость выполнения: ? (может ли кто-нибудь запустить с его помощью наш набор тестов?)
• Стоимость размера пакета: 613 B . Проблема с этим параметром заключается в стоимости использования X только одного из наших компонентов, например модального.

В конце концов, мы могли бы провести опрос в Твиттере для этого 🤔.

стоимость выполнения, если у вас установлены плагины расширения/композиции, почти равна 0, это проверка, определено ли свойство extend или composes , если нет - ничего не происходит

В общем, я проголосовал за первый пост, вы это имеете в виду? Я новичок во всем этом, так что потерпите меня, ха-ха.

Прими и мой голос

Еще одно соображение может заключаться в том, насколько эффективны обходные пути. Пример из моего кода:

<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 ) не работают, как будто их и не было. материал-интерфейс 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 .

Не знаю, почему это не работает, 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 прав. Я пробовал почти все способы, упомянутые здесь, но ни один из них больше не работает. Может быть, они раньше работали!