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

Question

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

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

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 撑。

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

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

为组件Component生成了200多个类。可以考虑使用 style 属性，用于经常改变风格。

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

问题描述投票：0回答：1

1个回答

最新问题

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

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1