标签: styled-components

我使用样式组件而不是传统的css方式.但我不知道它如何与ReactCSSTransitionGroup一起工作.

基本上,ReactCSSTransitionGroup在css资源中查找某些类名,然后在整个生命周期中应用于组件.但是,由于styled-components没有任何类名,因此样式直接应用于组件.

我知道我可以选择不使用,ReactCSSTransitionGroup因为这两种技术看起来不兼容.但是当我只使用时styled-components,似乎在卸载组件时无法渲染任何动画 - 它是纯粹的CSS,无法访问组件的生命周期.

任何帮助或建议表示赞赏.

我遇到了一个反应良好的ReactJS Boilerplate,并且是社区驱动的.样式部分更多地强调了样式化组件CSS,但从未停止过切换到传统的CSS样式方法.虽然这引起了我的兴趣,但是什么使得Styled-Component CSS脱颖而出,为什么需要采用它.

我对Styled组件CSS的理解:

1. 组件驱动的思想.您的CSS现在也是一个组件.- 这很酷!
2. 加载你需要的东西,当你需要时,有点懒惰的CSS
3. 主题提供者,皮肤,模块化和动态 - 这也可以通过其他库来实现
4. 组件DOM的服务器端构造及其样式.

我的问题是:

1. 浏览器的发展是为了解析CSS与Javascript解析分开,为什么我们试图偏离这个并适合所有Javascript？

2. Styled-component CSS将其javascript库发送到客户端,它实际上在运行时解析样式,并<style />在每个组件按需加载时放入内部标记.这意味着额外的负载和逻辑最终会导致浏览器的执行周期.为什么需要这个？

   (通过上面的问题,我的意思是每个组件加载相应的CSS计算和创建并通过style标签/多个样式标签插入头部- 重新发明CSS解释器)

3. <style />在head标记中连续计算的样式文本是否导致浏览器重排/重绘？

4. 我从中获得了哪些性能优势？

社区,请为我清空或纠正我,如果我错了.

一些关于重绘或DOM的好文章重新介绍了修改CSS样式时浏览器的性能代价.

• https://developers.google.com/speed/articles/reflow
• http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
• https://www.sitepoint.com/10-ways-minimize-reflows-improve-performance/
• https://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
• https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information

试图将一些代码从jss移植到样式组件,jss代码看起来像:

//...
const styles = {
  myStyles: {
    color: 'green'
  }
}

const {classes} = jss.createStyleSheet(styles).attach()

export default function(props) {
  return (
     <div>
       <Widget1 className={classes.myStyles}/>
       <Widget2 className={classes.myStyles}/>
     </div>
  )
}

我的问题是在多个组件中实现相同样式共享的惯用方法是什么？

我使用此代码从顶部边缘我的按钮：

const makeTopMargin = (elem) => {
    return styled(elem)`
        && {
            margin-top: 1em !important;
        }
    `;
}

const MarginButton = makeTopMargin(Button);

每当我使用MarginButton节点时，我都会收到此错误：Warning: PropclassNamedid not match. Server: "ui icon left labeled button sc-bwzfXH MjXOI" Client: "ui icon left labeled button sc-bdVaJa fKCkqX"

你可以在这里看到这个制作。

我该怎么办？

将样式:before和:after伪类应用于样式化组件的正确方法是什么？

我知道你可以使用

&:hover {}

将:hover伪类应用于样式化组件.

这是否适用于之前和之后的所有伪元素？

我已经尝试使用&:before和&:after策略一些相当复杂的例子,我不确定我的尝试是否工作,因为我的例子有问题,或者它不能像那样工作.

有人对此有一些了解吗？谢谢.

我刚刚开始使用 Material UI 5.0.4（带有styled-components），我想在组件中访问主题。我在网上查了一下useTheme，所以我检查了文档并找到了它- @mui/styles/useTheme。但是，它是遗留文档，并且@mui/styles在 MUI 5 中不存在。因此，我查看了@mui/system，并找到了“访问组件中的主题”部分。然而，这只是指向遗留文档！

在文档似乎对我没有帮助之后，我决定使用 Visual Studio Code 的“快速修复”功能，如果您将鼠标悬停在该函数上，VSCode 将为您提供要导入的选项列表。以下是我尝试过的选项列表以及它们不起作用的原因：

• @mui/material/styles/useTheme- 无论如何，返回默认主题对象。查看源代码，这实际上就是它的作用- 它切换到默认主题，然后返回主题。
• @mui/material/private-theming/useTheme- 这才回来null。我觉得我无论如何都不应该访问这个（它说private-），但我还是尝试了。
• @mui/system/useTheme- 这就是我希望能起作用的。然而，这也可能是最奇怪的一个。它为我提供了默认主题，但排除了许多属性。例如，它只提供了palette.mode，除此之外没有其他键palette。（你可以在下面看到整个事情）

{
    "breakpoints": {
        "keys": ["xs", "sm", "md", "lg", "xl"],
        "values": { "xs": 0, "sm": 600, "md": 900, "lg": 1200, "xl": 1536 },
        "unit": "px"
    },
    "direction": "ltr",
    "components": {},
    "palette": { "mode": "light" …

我试图让样式组件采用作为反应组件的 SVG 并将其设置为背景图像，但出现错误：

类型错误：无法将符号值转换为字符串

SVG 组件代码：

import React from "react";

const testSVG = props => {
  return (
    <svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 193.3 129.7">
      <g>
        <g>
          <g>
            <path
              fill="#434343"
              class="st0"
              d="M162.4,116c-4.6,7.5-15.6,13.6-24.4,13.6H16c-8.8,0-12.3-6.2-7.7-13.7c0,0,4.6-7.7,11.1-18.4
                c4.4-7.4,8.9-14.7,13.3-22.1c1.1-1.8,6.1-7.7,6.1-10.1c0-7.3-15-24.9-18.5-30.7C13.5,23.6,8.3,14.9,8.3,14.9
                C3.7,7.4,7.2,1.2,16,1.2c0,0,65.9,0,106.8,0c10,0,25.9-4.5,33.5,3.8c8.7,9.3,15.5,25.4,22.5,36.8c2.6,4.2,14.5,18.3,14.5,23.8
                c-0.1,7.6-16,26.1-19.6,32C167.1,108.3,162.4,116,162.4,116z"
            />
          </g>
        </g>
      </g>
    </svg>
  );
};

export default testSVG;

容器组件代码：

import React, { Component } from "react";
import StepSVG from "../../components/UI/SVGs/Test";

class StepBar extends Component {
  render() {
    const { steps } = this.props;

    return (
      <div>
        {steps
          ? steps.map(step => { …

我正在使用样式组件来构建我的组件.接受自定义值的所有样式属性都会在我的组件中重复使用(应该如此).考虑到这一点,我想使用某种全局变量,以便更新将传播到所有组件,而无需单独更新每个样式.

像这样的东西:

// Variables.js

var fontSizeMedium = 16px;

// Section.js

const Section = styled.section`
  font-size: ${fontSizeMedium};
`;

// Button.js

const Button = styled.button`
  font-size: ${fontSizeMedium};
`;

// Label.js

const Label = styled.span`
  font-size: ${fontSizeMedium};
`;

我想我的语法错了但是？此外,我知道Javascript领域不推荐全局变量,但在设计中,组件之间的重用样式是绝对必要的.这里的权衡是什么？

我正在使用样式组件构建一个包含rollUp的包.

我的rollup.config.js看起来像:

import resolve from 'rollup-plugin-node-resolve'
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  external: [
    'react',
    'react-proptypes'
  ],
  plugins: [
    resolve({
      extensions: [ '.js', '.json', '.jsx' ]
    }),
    commonjs({
      include: 'node_modules/**'
    }),
    babel({
      exclude: 'node_modules/**'
    })
  ]
}

我收到了

[!] Error: 'isValidElementType' is not exported by node_modules/react-is/index.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
node_modules/styled-components/dist/styled-components.es.js (7:9)
5: import stream from 'stream';
6: import PropTypes from 'prop-types';
7: import { isValidElementType } from 'react-is'; …

我正在使用一个使用React,Gatsby和样式组件的静态页面.

在设置页面样式时,我的开发工作流程通常涉及Chrome DevTools,在那里调整样式,直到我有我喜欢的东西,然后在代码中实现它们.

但是,使用样式化组件时,DevTools中为每个呈现元素显示的所有样式/规则都是灰色,斜体和禁用.我可以通过添加样式来覆盖它们element.style {},但这可能很痛苦,并且它无法解决根本问题:为什么样式应用程序在DevTools中禁用样式组件？

这是我所指的截图.