标签: styled-components

我正在使用样式系统，库的一个关键是使用速记道具来实现简单快速的主题化。

我已经简化了我的组件，但这里是有趣的部分：

import React from 'react'
import styled from 'styled-components'
import { color, ColorProps } from 'styled-system'

const StyledDiv = styled('div')<ColorProps>`
  ${color}
`

const Text = ({ color }: ColorProps) => {
  return <StyledDiv color={color} />
}

我在color道具上有一个错误，上面写着：

输入'字符串| (string | null)[] | undefined' 不能分配给类型 'string | (string & (string | null)[]) | 不明确的'。

我认为这是因为styled-system使用与本机 HTML 属性相同的命名color并且它冲突。

我该如何解决这个问题？

我.attrs()在 styled components 中遇到了这个函数，但我不明白它的作用，或者它有什么不同？

我试图理解他们文档中的示例，但就我而言，我可以在没有该attrs()功能的情况下做完全相同的事情。

有人可以向我解释一下或举一个简单的例子吗？

我正在使用 next.js 样式组件的全局样式，每次我重新加载我的页面时，我都能看到字体闪烁。

我有我的字体文件 public/fonts/Inconsolata

我在频谱聊天中到处寻找，next.js github问题，但似乎找不到任何解决方案。

页面/index.js

import styled from 'styled-components';

const H1 = styled.h1`
  font-family: 'Inconsolata Bold';
  font-weight: 700;
  color: #000;
`;

const index = () => {
  return (
    <div>
      <H1>font flashes</H1>
    </div>
  );
};

export default index;

页面/_app.js

import App from 'next/app';
import React from 'react';

import GlobalStyle from '../src/style/globalStyle';

export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <>
        <GlobalStyle />
        <Component {...pageProps} />
      </>
    ); …

我正在使用支持不同替换的自定义字体。我希望能够切换它们。现在在 React Native 中真的可能吗？

font-feature-settings: 'ss01'on, 'liga' off;

我们正试图从样式组件项目中找出以下问题的原因: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" …

通常在我的代码中,我使用的一些变体很少有不同的字体,例如:

• Arial,font-weight:400,font-style:normal
• Arial,font-weight:400,font-style:italic
• Arial,font-weight:700,font-style:normal
• Helvetica,font-weight:400,font-style:normal
• Helvetica,font-weight:400,font-style:italic

我正在使用CSS-IN-JS库styled-components,所以不使用一些styles.css.有时候,设计师到我这里来,问一次改变Arial,以Comic Sans用于font-style: italic;与font-weight: 400;

这不能用简单的跨项目的代码库替换是代码有此字体的其他变体.

我想最大限度地减少合并该更改所需的工作量,因此需要在一个地方隔离这些字体对象.

题 :

我为此设计了3种方法,第3种方法似乎是最好的方法,但请根据您的经验提出建议.也许下面指定的每一个都有一些额外的缺点或优点？

方法:

第一种方法

我想将这些文本定义提取为单独的style-components,如:

const ArialGeneral = styled.span`
  font-family: Arial;
  font-style: normal;
  font-weight: 400;
`

const ArialNormal = styled(ArialGeneral)``
const ArialNormalItalic = styled(ArialGeneral)`
  font-style: italic;
`

然后用相关样式包装所有文本出现.

...
<HeroText>
  <ArialNormal>
    Welcome to our system!
  </ArialNormal>
</HeroText>
...

其中的缺点是:

• 额外的JSX标签

• 可能需要一些计算成本来重新渲染这些额外的组件以及浏览器的CSS计算

优点:

• 我将有一个地方来管理任何给定[font-family, font-style, font-weight]组合的所有出现

第二种方法

使用相同的技术,但不是在类的形式中使用基本相同的定义定义styled-components使用全局styles.css,例如: …

1. 要使用样式化的组件构建next.js应用程序，确实非常容易。您只需要使用其_document.js片段即可启用SSR并防止页面加载时样式闪烁：https : //github.com/zeit/next.js/blob/canary/examples/with-styled-components/pages/_document.js

2.使用material-ui来构建next.js应用几乎是简单的。您只需要从一个项目基础开始：https : //github.com/mui-org/material-ui/tree/master/examples/nextjs，它在以下位置有自己的实现_document.js：https : //github.com/mui -org / material-ui / blob / master / examples / nextjs / pages / _document.js

3.遗憾的是，我无法弄清楚如何“合并”这两种实现并获得下一个应用程序，其中样式化组件和Material-ui组件可以共存，SSR，并且在页面加载时不会闪烁。

你能帮助我吗？互联网上有没有比我已经解决了这个问题但我不知道的能力更好的人？

提前致谢。

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：正在按预期应用样式。