我遇到的情况是，我的 MUI 组件库的 JSS 样式（样式 A）正在取代消费者网站提供的样式（样式 B）。

样式 A 旨在被样式 B 覆盖。

以这个最小的例子为例：

样式A（在组件库中）

const styles = theme => ({
    title: {
        color: 'red'
    }
});

const CollapsibleCard = ({classes, title}) => (
    <Typography className={classes.title} variant={"h6"}>
        {title}
    </Typography>
);

export default withStyles(styles)(CollapsibleCard);

样式 B（在消费者网站）

const styles = {
    title: {
        color: 'green'
    },
};

const Page = ({classes}) => (
    <CollapsibleCard
        title={"Testing"}
        classes={{
            title: classes.title
        }}
    />
);
export default withStyles(styles)(Page);

导致元素具有级联样式：

.CollapsibleCard-title-160 { …

我将Next.js与styled-jsx和stylelint一起使用，一切都很顺利，直到我开始variables在styled-jsx中使用，因为 stylelint 会抛出stylelint(CssSyntaxError)这些变量。

例如

const Button = ({ color }) => (
  <>
    <button>Hello World!</button>

    <style jsx>{`
      button {
        color: ${color || 'blue'};
                 ^^^^^ Unknown word (CssSyntaxError)
      }
    `}</style>
  </>
)

我不知道如何修复它，或者它是否有任何可以提供帮助的插件。

我正在尝试使用Partials在 Emotion 中复制一些 CSS ，但我不知道如何复制规则，就像:first-of-type我使用partial. 有什么方法可以实现这一目标吗？

启动CSS：

li.item {
  background: white;
  border: 1px solid;
}

li.item.isResult:first-of-type {
  background: pink; /* Don't know how to port this rule */
}

将此规则移植到 Emotion 的最佳尝试：

import styled from '@emotion/styled';
import { css } from '@emotion/core';

const Item = styled.li`
  background: white;
  border: 1px solid;
  ${resultPartial}
`

const resultPartial = props => props.isResult && css`
  &:first-of-type {
    background: pink; // Has no effect
  }
`

PS：虽然partialEmotion …

Emotion 文档告诉我们如何制作可在 css 道具中使用的可重用媒体查询。这允许我们在 css prop 中进行以下查询：

<div
  css={{
    color: 'green',
    [mq[0]]: {
      color: 'gray'
    },
    [mq[1]]: {
      color: 'hotpink'
    }
  }}
>

使用mq[0]并mq[1]引用断点数组中的前两项。例如： const breakpoints = [576, 768, 992, 1200]。

此外，本文更进一步，展示了如何使用断点对象获取命名的可重用媒体查询。它首先根据情感文档制作类似的功能，但对于对象：

const mq = n => {
  const bpArray = Object.keys(bp).map(key => [key, bp[key]]);

  const [result] = bpArray.reduce((acc, [name, size]) => {
    if (n === name) return [...acc, `@media (min-width: ${size}px)`];
    return acc;
  }, []);

  return result;
}; …

如何处理@imports带有情感的CSS？我最近升级到版本 11，它发出以下错误：

`@import` rules can't be after other rules. Please put your `@import` rules before your other rules.

我已确保这是我的代码中的第一个语句或第一个全局注入。我的CSS代码是：

import { injectGlobal } from '@emotion/css';

injectGlobal`

  /* Normalize the stylesheet */
  /* @import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'); */

  /* Using typeface 'Sarabun' */
  @import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

  /* Using typeface 'Fira Code' for code snippets */
  @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');

  html,
  body {
    font-family: 'Sarabun', sans-serif;
    margin: 0;
    padding: 0;
  }

  pre {
    font-family: 'Fira Code', monospace;
    font-weight: 500;
  }
`;

我刚刚开始使用样式组件，并希望为按钮、导航栏等内容创建变体。

例如，我想创建一个深色版本的导航栏（其中背景颜色会变暗，文本颜色会变亮）。

我想要做的只是在组件上添加一个黑暗道具，如下所示：

<Navbar dark>...</Navbar>

我想这样做而不是这样：

<Navbar type="dark">...</Navbar>

但是，我不确定如何执行此操作。也就是说，如何仅通过检查道具名称是否存在来设置元素的样式（而不向道具传递任何值）？

有任何想法吗？提前致谢。

我在 React 中使用样式化组件。每当我在样式化组件中编写样式并且在浏览器中加载应用程序时，我都会在开发人员工具的元素选项卡中获得一些随机类名称。我只是想知道幕后发生了什么？

const Button = styled.a`
 display: inline-block;
 border-radius: 3px;
 padding: 0.5rem 0;
 margin: 0.5rem 1rem;
 width: 11rem;
 background: transparent;
 color: white;
border: 2px solid white;
`

render(
 <div>
  <Button
  href="https://github.com/styled-components/styled-components"
  target="_blank"
  rel="noopener"
  primary
>
  GitHub
</Button>
<Button as={Link} href="/docs">
  Documentation
</Button>

）

如果我们检查并检查开发人员工具中的元素，我可以看到一些随机类显示如下；

<a
  href="https://github.com/styled-components/styled-components"
  target="_blank"
  rel="noopener"
  class = "sc-jDwBTQ "
>
  GitHub
</a>

我想将 Linaria 库（https://github.com/callstack/linaria）与 nextJS 一起使用。现在我就按照文档实现了。但发生了下一个错误。

全局 CSS 无法从 Custom 以外的文件导入。请将所有全局CSS导入移至pages/_app.js。了解更多： https: //err.sh/next.js/css-global

我理解这个错误。但我想知道。如何将 Linaria 与 NextJS 结合使用？

• .babelrc

{
  "presets": ["next/babel", "linaria/babel"],
}

• next.config.js

const path = require("path");

module.exports = {
  webpackDevMiddleware: (config) => {
    config.watchOptions = {
      poll: 1000,
      aggregateTimeout: 300,
    };
    return config;
  },

  webpack: (config) => {
    config.module.rules.push({
      test: /\.tsx$/,
      use: [
        {
          loader: "linaria/loader",
          options: {
            sourceMap: process.env.NODE_ENV !== "production",
          },
        },
      ],
    });

    return config;
  },
};

据我了解，MUI 5 在后台使用 Emotion 进行样式设置，Emotion 有一个很好的辅助函数css，它看起来像返回一个字符串 - 一个可以用作值className或任何其他属性的类名。

import { css, cx } from '@emotion/css'

render(
  <div
    className={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
    `}
  >
    Text
  </div>
)

我到处寻找，但找不到 MUI 中可用的模拟。system 和 styled-engine 中有css函数，但它似乎没有做同样的事情，它返回SerializedStyles。

我希望使用它的用例如下：

我有一个组件，可让您传递该组件不同部分的类名（字符串），从而使您能够更改组件的样式。看来这个css功能（如情感文档中所示）可以帮助我解决这个问题。

例如：

import { css, cx } from '@emotion/css'

render(
  <div
    className={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
    `}
  >
    Text
  </div>
)

我想我可以解决它，makeStyles()但它不是“遗留”的，上面屏幕截图中显示的语法对我来说更有吸引力。

我有一个由两部分组成的应用程序：

• ( A) 遗留应用程序 (AngularJs) 及其自己的 CSS 类。
• ( B)div包含一个全新的应用程序 (React)。B使用 webpack、postcss 和 Tailwind 构建。

我能否确保 的BTailwind 类不受 的A样式表影响，反之亦然，而不对代码库进行任何重大更改？

糟糕的解决方案

我目前发现两种可能的解决方案需要进行重大更改：

1. 我知道 Tailwind 有一个前缀配置选项，但我不想为数千个类添加前缀（特别是考虑到前缀比类名本身长）。
2. 将css-modules与本地导入一起使用。我也不喜欢这种方法，因为：
   • (i) 我不确定这与 Tailwind 的效果如何，并且
   • （ii）即使它有效，我也不想从各种地方本地导入，因为这会让事情变得更加冗长：
     • 例如className="x" ... className="y"变成：
       • import s1 from 's1'; import s2 from 's2'; ... className="s1.x" ... className="s2.y"

更多相关方法

我发现了另外两个相关的 postcss 插件，但它们还不够：

1. postcss-rename很棒，但它不能修复*.js文件中的名称。
2. purgecss可以根据*.js文件中的存在找到类，然后将它们从输出类列表中删除，但它们不允许重命名。

我特别发现最关键的缺失功能似乎是*.jspurgecss. 似乎还没有其他解决方案能够做到这一点。

未解决的问题 …