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感谢您的反馈。 我将更改添加到更改日志的重大更改部分。

• [核心] 压缩包大小减少 2kB (#9129) @oliviertassinari
  我们已删除：
  
  
  
  • jss 扩展(1.3 kB)
  
  
  • jss-撰写(426 B)
  
  
  • jss 扩展(702 B)
  
  
  • jss 模板(330 B)
  
  

我们需要提到用户如何在多个地方自定义 JSS 实例，因为通过这个优化，我们让很多用户遇到了这个和类似的问题（仍然不相信它值得）

@kof我认为你可能是对的：#9335

@kof我认为我们需要将此视为一个实验。 我的策略是观望。 如果人们抱怨，那么我们会添加他们错过的插件。

对我来说，一切都与作曲有关

@kof我认为我们需要将此视为一个实验。 我的策略是观望。 如果人们抱怨，那么我们会添加他们错过的插件。

这基本上就像等待第一个抱怨他正在使用的插件缺失的用户一样，你永远不会完成这个实验哈哈

“撰写”看起来是解决共享样式表问题的好方法”

嗬！ @oallouch同样在这里：我确定 mui 使用的是jss-preset-default但后来我偶然发现了这个。
我试图使用compose或extend 。
@olegberman如果压缩了 2kb，那么这次删除是否值得？ 🤔

@oliviertassinari告诉你

我们已更新文档以反映此更改。

我遇到了同样的问题，试图使用扩展插件。
我试图遵循这个： https: //material-ui-next.com/guides/right-to-left/#3 -jss-rtl
但我正在使用服务器端渲染，但无法使其正常工作。

PS：不确定是否值得为 2kb 删除这些插件，因为这些功能真的很棒，每个人都应该使用😁

我第二点是，扩展和组合是 JSS 中恕我直言的重要工具，不值得 2kb。

渲染运行时开销需要量化。 这不仅仅是关于捆绑包的大小。

对于 mui，它仍然是可选的，所以如果你发现它增加了开销，你可以继续使用 classNames 库和传播运算符，我认为虽然它不会有太大的区别。

我试图按照文档启用 jss-rtl 插件的确切方式启用 jss-extend 插件。 相同的代码，但我已将所有与插件相关的调用替换为 jss-extend 之一。 但没有成功。 实际上应该扩展的规则不受影响。 最终有人能做到吗？

该死的，花了半天时间在material-ui中如何使用jss-extend，这个例子在某处找到：
cssLabel: { "&$cssFocused": { color: grey[500] } }, cssFocused: { backgroundColor: blue[500] },
我虽然"&$cssFocused会像扩展：cssFocused。 但事实并非如此。 那么该怎么做呢？

@nsaubi您在谈论嵌套功能， & 被包含规则选择器替换，就像在 sass 中一样。

关于 jss-extend/compose 将来是否会成为标准的任何信息？

我希望 extend 能够让它回来，因为它有助于使 jss 代码在 imo 中看起来更干净。

++ (1 )

2kb 并不重要。 我认为用“extend and compose”建立一个好的编码模式对未来更重要。
@oliviertassinari您能否评估一下以将它们添加回来，实际上，为它们添加全面支持？

@gitsupersmecher通过使用JssProvider组件将插件添加到 JSS，您已经可以完全支持“扩展和编写”。 大多数人可以在没有的情况下相处。 +2kb 捆绑包增加是问题的一方面，运行时成本是另一方面。

我认为这 2 个运行时成本几乎不明显。我还认为值得为此添加几 kb，因为我们将样式设置为公共 api 的一部分，而这些都是非常受欢迎的事情。

但是，可以使用扩展运算符代替扩展，它涵盖了大多数情况，并且可以通过连接类名在组件内部完成组合。

:+1: 重新添加这两个（扩展和组合）。 对于仅 2KB 的 IMO，它们绝对值得。

另一种选择是真正隐藏内部 jss 实例，并清楚地说明如何使用自己的 jss 设置进行样式设置。

嗨，我试图在 nextjs 项目中添加 jss-extend（使用 jss-rtl 插件示例）但没有成功。 有人可以让它工作吗？

^ 也想知道

在这里我发布我的工作。 我不知道如何实现 generateClassName 因为在 nextjs 示例中已经使用过。

以这个例子为基础：
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

我同意默认情况下应包含扩展和撰写。 它们是这样的基本功能，也是我使用 JSS 的原因。 我希望看到它们被重新添加，因为即使是小型项目也可能会使用它们，而且自定义安装相对来说非常冗长。

@AdamWhitehurst你能支持这个问题吗？ 这将帮助我们做出更好的权衡:)。

我认为我们必须考虑以下加权维度：

• 对话的赞成票/参与者的数量。
• 运行时成本： ? （有人可以用它运行我们的基准测试套件吗？）
• 捆绑包大小成本： 613 B。 这个维度的问题在于 X 仅使用我们的一个组件（如 Modal）的成本。

最终，我们可以为它运行一个 Twitter 民意调查 🤔。

如果您安装了扩展/撰写插件，则运行时成本几乎为 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有没有关于如何使用 nextJS 添加自定义 JSS 插件（如jss-extend ）的示例？

@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 ，但 MUI 中 JSS 样式的类型定义 TS 不允许扩展语法。

尽管可以将扩展插件添加到StyleProvider ，但 MUI 中 JSS 样式的类型定义 TS 不允许扩展语法。

我猜@mifrej是对的。 我已经尝试了这里提到的几乎所有方法，但它们都不再起作用了。 也许他们以前曾经工作过！