标签: emotion-js

使用 Material-UI 的 SSR 上的 @emotion/cache 始终为空

我将 React SSR 从纯@emotion 切换到了material-ui 5.0，但样式将不再被提取。ID 提取createExtractCriticalToChunks工作正常，但来自情感的 cache.inserted 对象现在始终是一个空对象。我在这里做错了什么？

 "@emotion/babel-plugin": "^11.3.0",
 "@emotion/cache": "^11.6.0",
 "@emotion/core": "11.0.0",
 "@emotion/css": "^11.5.0",
 "@emotion/react": "^11.6.0",
 "@emotion/server": "^11.4.0",
 "@emotion/styled": "^11.6.0",
 "@mui/icons-material": "5.0.0",
 "@mui/lab": "5.0.0-alpha.47",
 "@mui/material": "5.0.0",
 "@mui/styles": "5.0.0",
 "@mui/utils": "5.0.0",
 "@mui/x-data-grid": "5.0.0-beta.1",

Run Code Online (Sandbox Code Playgroud)

HTML：

 "@emotion/babel-plugin": "^11.3.0",
 "@emotion/cache": "^11.6.0",
 "@emotion/core": "11.0.0",
 "@emotion/css": "^11.5.0",
 "@emotion/react": "^11.6.0",
 "@emotion/server": "^11.4.0",
 "@emotion/styled": "^11.6.0",
 "@mui/icons-material": "5.0.0",
 "@mui/lab": "5.0.0-alpha.47",
 "@mui/material": "5.0.0",
 "@mui/styles": "5.0.0",
 "@mui/utils": "5.0.0",
 "@mui/x-data-grid": "5.0.0-beta.1",

Run Code Online (Sandbox Code Playgroud)

提取的 ID：

<style data-emotion="css-global 1vs7qi2">html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;-webkit-text-size-adjust:100%;}*,*::before,*::after{box-sizing:inherit;}strong,b{font-weight:700;}body{margin:0;color:#29343D;line-height:1.5;font-size:1rem;font-family:Inter,sans-serif;font-weight:400;background-color:#fff;}@media print{body{background-color:#fff;}}body::backdrop{background-color:#fff;}</style><style data-emotion="css-global 1vs7qi2">html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;-webkit-text-size-adjust:100%;}*,*::before,*::after{box-sizing:inherit;}strong,b{font-weight:700;}body{margin:0;color:#29343D;line-height:1.5;font-size:1rem;font-family:Inter,sans-serif;font-weight:400;background-color:#fff;}@media print{body{background-color:#fff;}}body::backdrop{background-color:#fff;}</style><style data-emotion="css-global r7h3of">*{margin:0;padding:0;box-sizing:border-box;}html{width:100%;height:100%;-webkit-overflow-scrolling:touch;}body{width:100%;height:100%;}#root{width:100%;height:100%;}input[type=number]{-moz-appearance:textfield;}input[type=number]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;}input[type=number]::-webkit-inner-spin-button{margin:0;-webkit-appearance:none;}textarea::-webkit-input-placeholder{color:#919FAB;}textarea::-moz-placeholder{opacity:1;color:#919FAB;}textarea:-ms-input-placeholder{color:#919FAB;}textarea::-webkit-input-placeholder{color:#919FAB;}textarea::-moz-placeholder{color:#919FAB;}textarea:-ms-input-placeholder{color:#919FAB;}textarea::placeholder{color:#919FAB;}img{display:block;max-width:100%;}.blur-up{-webkit-filter:blur(5px);-webkit-filter:blur(5px);filter:blur(5px);-webkit-transition:filter 400ms,-webkit-filter 400ms;transition:filter 400ms,-webkit-filter 400ms;}.blur-up.lazyloaded{-webkit-filter:blur(0);-webkit-filter:blur(0);filter:blur(0);}</style><style data-emotion="css …

Run Code Online (Sandbox Code Playgroud)

javascript emotion material-ui server-side-rendering emotion-js

tfr*_*rei

lucky-day

4
推荐指数

1
解决办法

3908
查看次数

情感风格不压倒一切

我正在使用 next.js 和 @emotion/styled 制作一个网站。

我有一个卡片组件，如下所示。

import React from 'react';
import styled from '@emotion/styled';

    const Card: React.FC = (props) => {
      return (
          <Container>{props.children}</Container>
      );
    };
    export default Card;
    
    const Container = styled.div`
      padding:36px;
    `

Run Code Online (Sandbox Code Playgroud)

我想覆盖样式并为其添加边框。

import Card from '@/components/atoms/products/Card'
import styled from '@emotion/styled';
const Test: React.FC = () =>{
  return(<BorderedCard/>)
}
export default Test


const BorderedCard = styled(Card)`
  height:300px:
  border: solid 1px #244C95;
`

Run Code Online (Sandbox Code Playgroud)

我导入卡片组件并覆盖它。我预计卡片组件有边框，但该样式不适用于该组件。此方法适用于项目中的其他任何地方，但不适用于此组件。

我怀疑不知何故找不到这个组件，并检查了 ts 配置文件。

  "include": [
    "next-env.d.ts",
    "src/**/*",
    "emotion.d.ts"
  ],

Run Code Online (Sandbox Code Playgroud)

然后我尝试更改文件的目录，但没有改变。

有人知道为什么这种压倒一切的风格不起作用吗？

任何帮助，将不胜感激。

emotion typescript reactjs next.js emotion-js

kap*_*ppa

2021 06-08

3
推荐指数

1
解决办法

2579
查看次数

使用 Nextjs Tailwind Emotion 导出项目失去了 tailwind css 样式

我正在启动一个新的 Next.js 项目，该项目具有现有的情感.js 样式，现在我正在尝试通过此指令添加 tailwind https://tailwindcss.com/docs/guides/nextjs

这是我的 postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Run Code Online (Sandbox Code Playgroud)

和 tailwind.config.js

module.exports = {
    purge: [
        './pages/**/*.js', 
        './components/**/*.js',
        './lib/**/*/js'
    ],
    darkMode: 'class', // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: []
}

Run Code Online (Sandbox Code Playgroud)

和 next.config.js

module.exports = {
    images: {
        domains: [
            'user-images.githubusercontent.com'
        ]
    },
    typescript: {
        ignoreBuildErrors: true
    },
    eslint: {
        ignoreDuringBuilds: true
    }
}

Run Code Online (Sandbox Code Playgroud)

这是我在 /styles/global.css 中使用 Tailwind 的方法