我们正试图从样式组件项目中找出以下问题的原因:https://github.com/styled-components/styled-components/issues/389

对refs + setNativeProps进行了一些更改,这些更改在一个地方打破了动画,假设是因为某些动画相关信息没有正确传递下来.

因此,要了解如何createAnimatedComponent改变初始组件的问题,是什么？如果没有正确传递,会导致动画中断的原因是什么？

如果您知道可能导致此问题的原因,请提供想法/详细解答.

更新 与此问题相关的重大更改发生在此文件中的某处,以供参考innerRef传递ref,isTag函数检查它是否是本机组件.

我在React中有以下组件:

const Button = styled.div`
        width: 30px;
        height: 30px;
        position: absolute;
        right: 2em;
        top: 50%;
        transform: translateY(-50%);
        padding: 0;
        margin: 0;

        &::before,
        &::after {
          content: "";
          position: absolute;
          background-color: #3d3935;
          transition: transform 0.25s ease-out;
        }

        &::before {
          top: 0;
          left: 50%;
          width: 4px;
          height: 100%;
          margin-left: -2px;
        }

        &::after {
          top: 50%;
          left: 0;
          width: 100%;
          height: 4px;
          margin-top: -2px;
        }
`;

它只是呈现具有库样式组件的组件.它基本上显示了一个+标志.

但是,我想分别轮换每一行,使用:

    &::before {
      transform: rotate(${this.state.expanded ? '0' : '45'}deg);
    }
    &::after {
      transform: …

我正在尝试将打字稿集成到我们的项目中,到目前为止,我偶然发现了样式组件库的一个问题

考虑这个组件

import * as React from "react";
import styled from "styled-components/native";
import { TouchableOpacity } from "react-native";

// -- types ----------------------------------------------------------------- //
export interface Props {
  onPress: any;
  src: any;
  width: string;
  height: string;
}

// -- styling --------------------------------------------------------------- //
const Icon = styled.Image`
  width: ${(p: Props) => p.width};
  height: ${(p: Props) => p.height};
`;

class TouchableIcon extends React.Component<Props> {
  // -- default props ------------------------------------------------------- //
  static defaultProps: Partial<Props> = {
    src: null,
    width: "20px",
    height: "20px" …

import styled from 'styled-components';
import {Link} from 'react-router-dom';

const LS = {};

LS.NavFixedItem_LINK = styled(Link)`

  display: flex;
  justify-content: ${props => props.tempLeftProp ? 'flex-start' : 'center'};
  align-items: center;
`;

function NavFixedItem(props) {
  return(
    <LS.NavFixedItem_LINK to={props.link} tempLeftProp={props.toLeft}>
      {props.name}
    </LS.NavFixedItem_LINK>
  );
}

我收到错误：

警告： React 无法识别tempLeftPropDOM 元素上的prop。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写templeftprop。如果您不小心从父组件传递了它，请将其从 DOM 元素中删除。

我一直将道具传递给我的样式组件。我不知道问题是否在于我正在为组件Link而不是常规 HTML 元素设置样式。

题

为什么我收到这个错误？忽略它是否安全？

PS：正在按预期应用样式。

我有一个dot-components基于mui-org/material-ui. 我有另一个应用程序正在使用我的dot-components组件库，最近我注意到我的单元测试中出现了控制台警告。

控制台警告

    console.warn
      Material-UI: The `css` function is deprecated. Use the `styleFunctionSx` instead.

      at css (../../node_modules/@material-ui/system/styleFunctionSx.js:75:13)
      at Object.<anonymous> (../../node_modules/@material-ui/core/Box/Box.js:14:37)
      at Object.<anonymous> (../../node_modules/@material-ui/core/Box/index.js:21:36)

有问题的控制台警告与mui-org/material-ui PR #23454有关，但我已经检查了我的应用程序并确认我们根本dot-components没有使用。Box我已经浏览了所有堆栈溢出并在网上搜索了所有可以搜索的地方。我什至尝试在mui-org/material-ui #27799中询问这个问题，但是他们更关心解决问题而不是实际提供帮助。

我在这里没有选择，我唯一能想到的是 MUI 发出警告，因为它看到css我的样式组件中使用了

样式化组件示例

import styled, { css } from 'styled-components';

export const StyledProductInstancesList = styled.div``;

export const StyledCard = styled(DotCard)`
  ${({ theme }) => css`
    margin-bottom: ${theme.spacing(1)}px;
  `}
`;

我将一个沙箱与我所看到的问题的非常清晰的最小示例放在一起。

正在导入的包

    @material-ui/core:  4.11.4 
    @material-ui/styles:  4.11.4 
    @material-ui/system: …

在本地没问题（已知警告并且 CSS 渲染良好），但在 Vercel 上我的 Remix 应用程序收到此错误：

Hydration 失败，因为初始 UI 与服务器上呈现的内容不匹配。

业务逻辑运行良好，但 CSS 完全损坏。

2022 年 6 月 26 日 15:50 更新

我从头开始一个新项目，并逐一添加依赖项，并在每一步中部署到 Vercel。没有错误。样式化的组件渲染良好。所以依赖关系不是问题。

然后，我开始通过加载器从数据库中逐段获取数据，并将它们一一呈现在样式组件中。始终破坏 CSS 并产生错误的一件事是在渲染之前将日期时间对象转换为字符串：

const DateTimeSpan = styled.span`
  font-size: 1rem;
`;

const hr = now.getHours();
const min = now.getMinutes();

<DateTimeSpan>
  {`${hr}:${min}`}
</DateTimeSpan>

奇怪的是，只有当我将其格式化为仅渲染时间时，它才会中断。有了日期，就可以了：

const yr = now.getFullYear();
const mth = now.getMonth();
const dd = now.getDate();

<DateTimeSpan>
  {`${yr}-${mth}-${dd}`}
<DateTimeSpan>

我无法解释这一点。

更新于 2022 年 7 月 2 日 21:55

使用上面相同的最简单的项目，我和朋友已经确定，当我们尝试渲染hours时，具有样式组件的 CSS 会中断，即：

const hr = now.getHours();

<DateTimeSpan> …

问题

我一直在使用Jest和Enzyme为我的React组件编写测试,并使用了很棒的Styled Components库.

但是,由于我已经实现了主题,所以我的所有测试都在破坏.让我给你举个例子.

这是我的LooksBrowser组件的代码(我删除了所有的import和prop-types以使其更具可读性):

const LooksBrowserWrapper = styled.div`
  position: relative;
  padding: 0 0 56.25%;
`;

const CurrentSlideWrapper = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
`;

const NextSlideWrapper = CurrentSlideWrapper.extend`
  z-index: 1;
`;

const SlideImage = styled.img`
  display: block;
  width: 100%;
`;

const SlideText = styled.div`
  display: flex;
  position: absolute;
  top: 25%;
  left: ${PXToVW(72)};
  height: 25%;
  flex-direction: column;
  justify-content: center;
`;

const SlideTitle = styled.p`
  flex: 0 0 auto; …

我有一个 3rd 方库，它需要calendarClassName修改它的样式，它需要一个 CSS 类的传统类名。我可以使用样式组件来完成此任务吗？

我尝试了css函数，但它不起作用，结果是样式数组而不是 CSS 类实体。

只想做这样的事情：

const myStyle = css`color: black`;

<DatePicker calendarClassName={myStyle}> // won't work

尝试attrs没有任何运气，className 没有传递给 DatePicker。

const calendarClassName = "calendar";
export const MyDatePicker = styled(DatePicker).attrs({
  calendarClassName,
})`
  .${calendarClassName} {
    border-radius: 0px;
    box-shadow: 2px 0px 2.5px #D6D6D6;
    border: 1px solid ${color.pacific};
  }
`;

我知道我可以直接使用 CSS，但我只想知道如何使用 CSSstyled-components来完成这项工作。

谢谢 ：）

我创建了一个新的 React 应用程序create-react-app，然后styled-component使用npm. 但是当我在组件中使用它时，出现以下错误。

编译失败。./src/Components/Lightbox/styledLightbox.js

未找到模块：

无法解析“/Users/ishan/Documents/react-app/src/Components/Lightbox”中的“styled-component”

以下是组件：

import React, { Component } from 'react';
import { LightboxWrapper } from './styledLightbox';

class Lightbox extends Component {

    renderEntry() {
        if (this.props.lightbox.type === "photo") {
         return  <img alt="name" src={this.props.lightbox.entry} />;
        } 
        if (this.props.lightbox.type === "video") {
        return <video src={this.props.lightbox.entry} onLoadedMetadata={(e) => {console.log("Video duration is: "+e.currentTarget.duration) } } autoPlay muted onEnded={() => console.log("Video ended")} width='100%' height='100%' ></video> 
        }
        if(this.props.lightbox.type === "text"){
        return <div> <p className="lightbox text"> {this.props.lightbox.entry} …

我正在为 SSR 使用 nextjs。我正在使用这个技术在服务器端渲染样式。因此，当 DOM 被下载时，它不仅会获取 HTML，还会获取它需要在样式标签中绘制的所有 CSS。

一旦 HTML 被解析，它就会开始绘制 - 到目前为止很好，一旦 JS 被下载和解析，问题就开始了。特别是_app.js，styled-components删除现有样式，参考。

这如何影响性能？

我的共识：

• FCP和LCP将因重绘而延迟
• 由于浏览器忙于绘制和重绘，主线程被阻塞，可能无法处理用户交互，最终导致帧率下降。

路由更改时是否会发生同样的事情，因为它会拉取新的 JS 文件并编译和设置样式。这是样式组件的成本吗？