使用 Emotion，每次动态更新组件的样式时，都会在 <head> 中输出新的 <style>

Question

我注意到每次动态更新样式时都会输出新的 Emotion。

按照每次点击 DynamicStyleContainer 的例子，在头部创建一个新的。

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

import React from "react";
import _ from "lodash";

const app = css`
  width: 1000px;
  background-color: pink;
  height: 100px;
`;

const dynamicStyle = (props) => ({
  width: props.appDimensions + "px",
});

const DynamicStyleContainer = styled.div`
  ${dynamicStyle};
`;

export default function App() {
  const [appDimensions, setAppDimensions] = React.useState(1);

  const increase = () => {
    setAppDimensions(appDimensions + 1);
  };

  return (
    <DynamicStyleContainer appDimensions={appDimensions}>
      <div id="app" css={app} onClick={increase}></div>
    </DynamicStyleContainer>
  );
}

检查头部元素：

我阅读了文档和一些示例，似乎都在做类似的事情。这是正常行为吗？

Answer 1

这是预期的行为，CSS-in-JS（如情感），在每个独特的风格上生成className。

像您这样频繁地使用动态值，您的记忆会被这些样式淹没。

相反，使用 style 或 css prop.

<DynamicStyleContainer style={{ width: app.Dimensions }}>
  <div id="app" css={app} onClick={increase}></div>
</DynamicStyleContainer>;

在 styled-components 中你会得到一个警告，不知道 emotion 中的警告但修复是一样的。

Over 200 classes were generated for component Component. Consider using style property for frequently changed styles.

使用 Emotion，每次动态更新组件的样式时，都会在 <head> 中输出新的 <style>

Using Emotion, new <style> is getting outputted in the <head> every time component's style is dynamically updated

javascript

css

emotion

reactjs

styled-components