Material-ui: 기본적으로 JSS 확장 플러그인 지원

@tdkn jss-extend 플러그인을 로드하고 있습니까? https://github.com/cssinjs/react-jss#custom -setup

@mbrooks
감사합니다👍
아래와 같이 수정했습니다.
그러나 이것은 자세히 문서화되어 있습니까? :실망한:

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 피드백 주셔서 감사합니다. 변경 로그의 주요 변경 부분에 변경 사항을 추가하고 있습니다.

• [core] 번들 크기를 2kB gzip으로 축소(#9129) @oliviertassinari
  다음을 제거했습니다.
  
  
  
  • jss 확장 (1.3kB)
  
  
  • jss-compose (426B)
  
  
  • jss 확장 (702B)
  
  
  • jss-템플릿 (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
하지만 서버 측 렌더링을 사용하고 있으며 작동하게 만들 수 없었습니다.

추신: 이 플러그인을 2kb용으로 제거하는 것이 가치가 있는지 확실하지 않습니다. 모두가 사용해야 하는 정말 멋진 기능이기 때문입니다 😁

두 번째로, 확장 및 작성은 JSS의 IMHO 필수 도구이며 2kb의 가치가 없습니다.

렌더링 런타임 오버헤드를 정량화해야 합니다. 번들 크기에 관한 것만이 아닙니다.

mui의 경우 여전히 선택 사항이므로 오버헤드가 증가하는 것으로 확인되면 className 라이브러리 및 스프레드 연산자를 계속 사용할 수 있지만 큰 차이는 없을 것이라고 생각합니다.

문서에 따라 jss-rtl 플러그인을 활성화해야 하는 정확한 방식으로 jss-extend 플러그인을 활성화하려고 했습니다. 동일한 코드이지만 jss-extend에 대한 모든 플러그인 관련 호출을 교체했습니다. 그러나 성공하지 못했습니다. 확장해야 하는 규칙은 실제로 영향을 받지 않습니다. 누군가가 결국 그것을 만들 수 있었습니까?

젠장, 지난 날 반은 material-ui에서 jss-extend를 사용하는 방법에 대해 썼습니다. 이 예제는 어딘가에 있습니다:
cssLabel: { "&$cssFocused": { color: grey[500] } }, cssFocused: { backgroundColor: blue[500] },
여기서 "&$cssFocused 는 extend: cssFocused와 같을 것입니다. 하지만 그렇지 않습니다. 그래서 그것을 하는 방법?

@nsaubi 중첩 기능에 대해 이야기하고 있으며 &는 sass에서와 같이 포함하는 규칙 선택기로 대체됩니다.

jss-extend/compose가 미래에 표준이 될 것인지에 대한 정보가 있습니까?

jss 코드를 더 깔끔하게 보이게 하는 데 도움이 되므로 확장이 다시 만들어지기를 바랍니다.

++ (1 )

2kb는 별로 중요하지 않습니다. 앞으로 '확장하고 작성'으로 좋은 코딩 패턴을 구축하는 것이 더 중요하다고 생각합니다.
@oliviertassinari 다시 추가하고 실제로 전체 지원을 추가하기 위해 평가해 주시겠습니까?

@gitsupersmecher JssProvider 구성 요소를 사용하여 JSS에 플러그인을 추가하여 "확장 및 작성"에 대한 완전한 지원을 이미 가질 수 있습니다. 대부분의 사람들은 없이 지낼 수 있습니다. +2kb 번들 증가는 문제의 한 측면이고 런타임 비용은 다른 측면입니다.

런타임 비용은 2의 경우 거의 눈에 띄지 않는다고 생각합니다. 또한 몇 kb를 추가할 가치가 있다고 생각합니다. 우리는 스타일 지정을 공개 API의 일부로 만들었고 매우 인기 있는 작업이기 때문입니다.

그러나 확장 대신에 대부분의 경우를 다루는 스프레드 연산자를 사용할 수 있으며 구성은 className을 연결하여 구성 요소 내부에서 수행할 수 있습니다.

:+1: 그 두 개를 다시 추가할 때(확장 및 작성). 그들은 단지 2KB IMO에 대해 확실히 가치가 있습니다.

또 다른 옵션은 내부 jss 인스턴스를 실제로 숨기고 스타일 지정을 위해 자체 jss 설정을 사용하는 방법을 매우 명확하게 만드는 것입니다.

안녕하세요, 성공하지 않고 (jss-rtl 플러그인 예제 사용) nextjs 프로젝트에 jss-extend를 추가하려고 합니다. 누군가가 그것을 작동하게 할 수 있습니까?

^^ 이것도 알고 싶습니다

여기에 내가하는 일을 게시합니다. nextjs 예제에서 이미 사용되었기 때문에 generateClassName을 구현하는 방법을 모르겠습니다.

이 예를 기본으로 사용:
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을 확장하도록 변경했지만 작동하지 않습니다. 이유에 대한 통찰력이 있습니까?

이 작업을 수행하는데 플러그인이 로드되지 않습니다(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만큼 해롭지 않고 확장/작성만큼 처리되지 않을 수도 있지만 코드 유지 관리도 여기에서 한 요인입니다. 결론적으로, 내 추론도 그렇게 강력하지 않을 수 있지만 손에 있는 옵션에 대한 그렇게 강력하지 않은 추론 앞에서... 나는 군중이 원하는 것을 제공한다고 말합니다! :디

확장 및 작성이 기본적으로 포함되어야 한다는 데 동의합니다. 그런 기본적인 기능들이 제가 JSS를 사용하는 이유입니다. 소규모 프로젝트에서도 사용할 수 있고 사용자 지정 설치가 비교적 오래 걸리기 때문에 다시 추가되는 것을 보고 싶습니다.

@AdamWhitehurst 이 문제에 찬성표를 던질 수 있습니까? 더 나은 절충안을 만드는 데 도움이 될 것입니다. :).

다음 가중치 차원을 고려해야 한다고 생각합니다.

• 대화에 대한 찬성/참가자 수.
• 런타임 비용: ? (누군가 벤치마크 제품군을 실행할 수 있습니까?)
• 번들 크기 비용: 613 B . 이 차원의 문제는 X가 Modal과 같은 구성 요소 중 하나만 사용하는 데 드는 비용입니다.

결국 트위터 설문조사를 실시할 수 있게 되었습니다 🤔.

확장/작성 플러그인이 설치된 경우 런타임 비용은 거의 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 )은 마치 존재하지 않는 것처럼 작동하지 않습니다. 재료 UI 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-extend 와 같은 사용자 정의 JSS 플러그인을 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 에 확장 플러그인을 추가할 수 있지만 MUI의 JSS 스타일에 대한 유형 정의 TS는 확장 구문을 허용하지 않습니다.

StyleProvider 에 확장 플러그인을 추가할 수 있지만 MUI의 JSS 스타일에 대한 유형 정의 TS는 확장 구문을 허용하지 않습니다.

@mifrej 가 맞는 것 같아요. 여기에 언급된 거의 모든 방법을 시도했지만 더 이상 작동하지 않습니다. 어쩌면 그들은 전에 일을 사용합니다!