标签: css-in-js

我正在寻找一种方法来改变JavaScript类的伪类选择器(例如:link,:hover等)的CSS规则.

所以CSS代码的类比:a:hover { color: red }在JS中.

我无法在其他任何地方找到答案; 如果有人知道这是浏览器不支持的东西,那么这也是一个有用的结果.

我从 Mui 4 迁移到 5，想知道如何使用类名。如果我想将某些样式仅应用于一个组件，则可以使用 SX 属性。但是，我正在努力为多个组件使用相同的类。在 v4 中，我的代码如下所示：

export const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      padding: theme.spacing(1),
      margin: 'auto',
    },
  })
)

我可以在任何组件中导入这个useStyles钩子并像这样使用它：

const classes = useStyles()
...
<div className={classes.root}>...</div>

该文档说，我可以“用类名覆盖样式”，但他们没有告诉如何做到这一点： https://mui.com/customization/how-to-customize/#overriding-styles-with-class -名称

我是否必须将这些样式放入外部 CSS 文件中？

.Button {
  color: black;
}

我宁愿在我的 ts 文件中定义样式。

我还找到了这个迁移指南： https ://next.material-ui.com/guides/migration-v4/#migrate-makestyles-to-emotion

我不喜欢方法一，因为使用这个 Root 包装器，有条件地应用类很不方便。（特别是对于打字稿，有一些开销）方法二带有外部依赖项和一些样板代码。

理想情况下，我会使用这样的样式，也许在样式对象周围使用一个说唱歌手函数：

export const root = {
  padding: theme.spacing(1),
  margin: 'auto',
}

<div className={root}>...</div>

当然，最后一种方法不起作用，因为 className 需要一个字符串作为输入。有人知道有很少样板代码的替代方案吗？

一些背景

我们的团队使用 Material UI 已经有一段时间了，我们很喜欢它。随着 Material UI v5 的发布，我们花时间检查下一步将使用哪种样式解决方案，因为 JSS 已被 MUI 团队放弃。

我们最终关注了Shopify 人员的讨论。他们对造型解决方案进行了非常详细的比较，最终选择了香草精作为他们的选择工具。强大的 TypeScript 支持，以及最重要的零运行时方法，让我们深信不疑。

遗憾的是，MUI 核心团队在决策时并未考虑香草精。

手头的问题

根据他们的文档， Material UI使用户能够使用各种样式解决方案。可以配置在引擎盖下使用的造型引擎，大致如下所述此处。

问题：

• 使用 vanilla-extract 是否（概念上）可能且（实用上）合理：
  • 设计 MUI 组件？
  • 使用它作为 MUI 底层的样式引擎？
• 洒水会在哪里发挥作用？
• 实施这一方法的具体步骤是什么？
• 有人已经这样做了，并且愿意分享他们的代码吗？

与通常的做法相反，我还没有真正尝试过任何实现方面的方法。根据我的理解，这意味着创建类似于mui-styled-engine（包裹情感）和mui-styled-engine-sc（包裹 styled-components）的东西。因为这对我来说似乎很复杂，所以我想我应该先问一下。

我的任务是使我们的 react redux web 应用程序中的页面加载速度更快。

当加载页面的操作触发时，我们会看到大约 0.5 秒的小冻结。

我打开了分析器，乍一看似乎没有什么问题。
火焰图

没有不必要的重新渲染，显示的唯一黄色警告大约是 10 毫秒。

当我转到分析器中的排名选项卡时，我得到了一个稍微不同的故事，我发现大部分时间都花在了 withStyles() 上。
排名图

我们通过 withStyles() 在 JS 中使用 CSS 的 material-ui 方法，看起来好像使用 WithStyles() 显着影响加载速度。
是这种情况吗？或者这仅仅是“我一次渲染太多东西”的情况

将 JS 中的 CSS 转换为仅 CSS 将是一项重大的努力，尽管我确实花了一个小时在 JS 中撕掉了 CSS 并发现性能提高了大约 40%，尽管我不知道这 40% 中有多少是由于 withStyles 与页面上样式元素的性能。

我正在升级到 antd v5，但在使用 v4 保留较少文件的变量覆盖时遇到了一些问题

我有多个 less 文件，src/theme其中之一包含以下内容

@import 'antd/lib/style/themes/variable.less';

/* font */
@font: ~'var(--font)';

/* auxiliary colors */
@secondary-color: ~'var(--secondary-color)';
@secondary-color-light: ~'var(--secondary-color-light)';
@primary-color-dark: @primary-7;
@primary-color-light: @primary-5;
@background-color: #f8f8f8;
@shadow-color: rgba(0, 0, 0, 0.09);
@text-color: #656565;
@secondary-text-color: #9d9d9d;
@light-text-color: #bababa;

@secondary-color-bg: @green-1;
@warning-color-bg: @orange-1;
@error-color-bg: @red-1;
@info-color-bg: @blue-1;

/* sizes */
@design-scale: 60 / 70;
@app-bar-height: 60px;

@page-padding: 40px 4vw;
@page-padding-mobile: 30px 15px;

@border-radius-base: 4px;
@border-width-base: 2px;

还尝试primaryColor从 ConfigProvider以下位置 注入ConfigProvider.config({ theme: {primaryColor: '#fa259e'} }); …

我是 CSS-in-JS 和情感的初学者，并试图将 sass react 应用程序移植到情感上。从一开始我就已经遇到了不知道如何设置 body 标签样式的问题。

人们通常习惯document.body.style这样做吗？我在任何地方都找不到这个覆盖......

假设我想将以下代码移植到情感中，那将如何实现？

$bodyFillColor: rgb(218, 236, 236);

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  max-width: 100vw;
  background-color: $bodyFillColor;
  .noScroll {
    overflow: hidden;
  }
}

是否有任何最佳实践可以涵盖这一点？

我想自定义一些用cssinjs编写的antd组件的样式。

我创建了一个 HOC 组件来访问主题并覆盖一些样式并在定义提供程序后调用它

import { useToken, useStyleRegister } from 'antd/es/theme/internal'
import { prefixCls } from 'Src/constants'
import { ReactNode } from 'react'
import { CSSObject } from '@ant-design/cssinjs'
import { GlobalToken } from 'antd/es/theme/interface'



function getStyleButton(token: GlobalToken): CSSObject {
  return {
    [`.${prefixCls}-btn`]: {
      ['&-default']: {
        backgroundColor: 'transparent '
      }
    }
  }
}



export const OverloadStyle = (props: { children: ReactNode }) => {
  const [theme, token, hashId] = useToken()

  useStyleRegister(
    {
      theme,
      token,
      hashId,
      path: ['OverloadStyle']
    },
    () => …

我正在使用Webpack 4，Babel 7和Emotion 10。

我安装了@ emotion / core @ emotion / styled和推荐的插件babel-plugin-emotion

样式正常。我可以创建一个样式化的组件并使用它。但是，如果我尝试使用本机css``功能，它将呈现对象而不是样式。

import { css, jsx } from '@emotion/core';

const bold = css`
  font-weight: 'bold';
`;

render(
...
<div css={bold}>Something!</div>
...
)

如果我检查标记，就会看到

如果我使用className而不是CSS，则相同。另外，如果我是内联的或者使用css（）功能。

并且如果我console.log（）该对象的结果是：

{
  "name": "15b6lyx-bold",
  "styles": "font-weight:'bold';label:bold;",
  "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkM6XFxwcmFjdGljZVxcbm9jcmFcXHNyY1xcQXBwLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCZ0IiLCJmaWxlIjoiQzpcXHByYWN0aWNlXFxub2NyYVxcc3JjXFxBcHAuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgQ29tcG9uZW50IH0gZnJvbSAncmVhY3QnO1xyXG5pbXBvcnQgeyBjb25uZWN0IH0gZnJvbSAncmVhY3QtcmVkdXgnO1xyXG5cclxuaW1wb3J0IHsgZmV0Y2hDb21tZW50cyB9IGZyb20gJy4vYWN0aW9ucyc7XHJcbmltcG9ydCB7IGNzcywganN4IH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuXHJcbmltcG9ydCBzdHlsZXMgZnJvbSAnLi9BcHAuY3NzJztcclxuaW1wb3J0IGNzc0luSnMgZnJvbSAnLi9BcHAuY3NzLmpzJztcclxuXHJcbmltcG9ydCByUEkgZnJvbSAnLi9pbWFnZXMvclBJLTQwMHg0MDAuanBnJztcclxuXHJcbmNvbnN0IENvbW1lbnRzQm94ID0gc3R5bGVkKCdkaXYnKWBcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiBsYXZlbmRlcjtcclxuYDtcclxuXHJcbmNvbnN0IGxpc3RJdGVtID0gY3NzYFxyXG4gIGxpc3Qtc3R5bGU6IG5vbmU7XHJcbiAgcGFkZGluZzogMDtcclxuYDtcclxuXHJcbmNvbnN0IGJvbGQgPSBjc3NgXHJcbiAgZm9udC13ZWlnaHQ6ICdib2xkJztcclxuYDtcclxuXHJcbmNsYXNzIEFwcCBleHRlbmRzIENvbXBvbmVudCB7XHJcbiAgY29tcG9uZW50RGlkTW91bnQoKSB7XHJcbiAgICB0aGlzLnByb3BzLmZldGNoQ29tbWVudHMoKTtcclxuICB9XHJcblxyXG4gIHJlbmRlckNvbW1lbnRzID0gKCkgPT4ge1xyXG4gICAgcmV0dXJuIHRoaXMucHJvcHMuY29tbWVudHMubWFwKGNvbW1lbnQgPT4ge1xyXG4gICAgICByZXR1cm4gPGxpIGtleT17Y29tbWVudC5pZH0+e2NvbW1lbnQubmFtZX08L2xpPjtcclxuICAgIH0pO1xyXG4gIH07XHJcblxyXG4gIHJlbmRlcigpIHtcclxuICAgIHJldHVybiAoXHJcbiAgICAgIDxkaXY+XHJcbiAgICAgICAgPGgxIHN0eWxlPXtjc3NJbkpzLnNlY3Rpb25UaXRsZX0+TGlzdCBvZiBjb21tZW50cyAxMDE8L2gxPlxyXG4gICAgICAgIDxDb21tZW50c0JveD57dGhpcy5yZW5kZXJDb21tZW50cygpfTwvQ29tbWVudHNCb3g+XHJcbiAgICAgICAgPGltZyBzcmM9e3JQSX0gYWx0PVwiUmFzcC4gUGkgTG9nb1wiIGNsYXNzTmFtZT17c3R5bGVzLnJQaX0gLz5cclxuICAgICAgICA8ZGl2IGNzcz17Y29uc29sZS5sb2coYm9sZCl9PlNvbWV0aGluZyE8L2Rpdj5cclxuICAgICAgPC9kaXY+XHJcbiAgICApO1xyXG4gIH1cclxufVxyXG5cclxuY29uc3QgbWFwU3RhdGVUb1Byb3BzID0gKHsgY29tbWVudHMgfSkgPT4ge1xyXG4gIHJldHVybiB7XHJcbiAgICBjb21tZW50c1xyXG4gIH07XHJcbn07XHJcblxyXG5leHBvcnQgZGVmYXVsdCBjb25uZWN0KG1hcFN0YXRlVG9Qcm9wcywgeyBmZXRjaENvbW1lbnRzIH0pKEFwcCk7XHJcbiJdfQ== */"
}

有人知道怎么回事...？我将不胜感激。我进行了研究，但找不到其他人提到此问题，因此可能做错了事。

我知道样式可以有条件地呈现，例如：

const HelloWorldLabel= styled("div")<{ centered?: boolean }>`
  display: ${({ centered }) => (centered ? "block" : "flex")};;
  margin: ${({ centered }) => (centered ? "auto 0" : "unset")};
  padding: ${({ centered }) => (centered ? "0 15px" : "unset")};
`;

这看起来并不 DRY - 我如何（是否可能）基于 props渲染整个css 样式块？

就像是：

const HelloWorldLabel= styled("div")<{ centered?: boolean }>`
   if (centered) {
    display: "block" ;
    margin: $"auto 0";
     padding: "0 15px" ;
   } else {
     ......
   }
`;

我们正在添加style src 'self'到 HTML 页面，情感正在动态生成样式到标题，如下所示

<head>
    <style data-emotion>
        ...
    </style>
    <style data-emotion>
        ...
    </style>
    <style data-emotion>
        ...
    </style>
    <style data-emotion>
        ...
    </style>
    ...
</head>

如何使用下面的故事书 webpack 配置为上述样式生成随机数

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = {
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building …