标签: styled-components

我遇到了一个错误说明(通过iOS测试):

无法读取null的属性'getScrollableNode'

尝试使用react-native的Animated与侧面样式组件样式工具进行反应和反应原生.

这是<Logo />我创建的组件的示例:

import React from 'react';
import { Image, Dimensions } from 'react-native';
import styled from 'styled-components/native';

const { width } = Dimensions.get('window');
const logoWidth = width - (width * 0.2);
const logoHeight = logoWidth * 0.4516;

const SLogoImage = styled(Image)`
  width: ${logoWidth};
  height: ${logoHeight};
`;

const Logo = ({ ...rest }) => (
  <SLogoImage
    source={require('../assets/logo.png')}
    {...rest}
  />
);

export default Logo;

然后我将此组件导入到我想要将动画应用于其中的一个场景中:

import React from 'react';
import { View, Animated …

我添加了css悬停属性来禁用按钮的悬停效果,但它似乎对我的情况不起作用,我该如何解决这个问题？

import Button from 'material-ui/Button'
import styled from 'styled-components'

const StyledButton = styled(Button)`
  &:hover {
    background: none;
  }
`
export const SubmitButton = ({ onClick }) => {
  return (
    <StyledButton
      variant="raised"
      onClick={onClick}>
      login
    </StyledButton>
  )
}

我正在研究在React应用程序中设置页面样式的最佳方法.我看到很多样式的样式,如Styled Components,Glamour,CSS Modules.

在我目前的项目中,我正在使用CSS模块(主要是为了摆脱CSS冲突和页面特定的CSS).我搜索了很多关于为什么我应该使用样式组件和CSS-in-JS但我无法得到任何具体答案.所以我的问题是,如果使用CSS-in-JS或样式组件有实际的性能优势,或者它只是语法糖.

这是我的样式化组件。

import * as React from 'react';
import styled from 'styled-components';
import { ComponentChildren } from 'app-types';

interface Props {
    children: ComponentChildren;
    emphasized: boolean;
}

const HeadingStyled = styled.h2`
    ${props => props.emphasized && css`
        display: inline;
        padding-top: 10px;
        padding-right: 30px;
  `}
`;

const Heading = (props: Props) => (
    <HeadingStyled>
        {props.children}
    </HeadingStyled>
);

export default Heading;

我收到以下警告：

• Property 'emphasized' does not exist on type 'ThemedStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, any>'.
• Cannot find name 'css'. Did you mean 'CSS'?

我该如何工作？

styled将 MUI 与 typescript 一起使用，并且也想从 MUI 中使用。当将组件属性传递给样式组件时，我从下面的打字稿沙箱中收到错误，也许有人知道解决方法。

https://codesandbox.io/s/material-demo-forked-lxdrj?file=/demo.tsx

所以我一直在使用JavaScript中的类型系统,并且大多数情况下工作正常但是样式组件存在问题.我似乎无法找到一种将流应用于样式组件的道具的好方法.到目前为止,我看到的唯一解决方案是:

export type ButtonPropTypes = ReactPropTypes & {
  styleType: 'safe' | 'info' | 'warning' | 'danger' | 'link',
  isPill: boolean,
  isThin: boolean,
};

export const ButtonStyled = styled.button`
  ${generateBaseStyles}
  ${hoverStyles}
  ${fillStyles}
  ${thinStyles}
  ${linkStyles}
`;

export const Button = (props: ButtonPropTypes) => <ButtonStyled {...props} />;

我必须为每个样式组件创建2个组件似乎相当多.

我希望我的谷歌技能只是垃圾,我错过了一些东西,但除了每个样式组件的多个组件之外,还有更好的方法吗？

我刚刚在styled-components 文档中读到以下错误,它将影响渲染时间.如果是这种情况,我如何重构代码并使用所需的道具来创建动态样式？

先感谢您.

标签组件

import React from 'react'
import styled from 'styled-components'

const Tab = ({ onClick, isSelected, children }) => {
    const TabWrapper = styled.li`
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px;
    margin: 1px;
    font-size: 3em;
    color: ${props => (isSelected ? `white` : `black`)};
    background-color: ${props => (isSelected ? `black` : `#C4C4C4`)};
    cursor: ${props => (isSelected ? 'default' : `pointer`)};
`

    return <TabWrapper onClick={onClick}>{children}</TabWrapper>
}


export default Tab

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

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

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

我在使用useRef带有样式组件的钩子时遇到了一些问题。

Linter 提醒我Object is possibly 'null'在 didMount 中useEffect。对此有什么想法吗？

这不是重复的有两个原因：

• 旧的答案是指ref在类组件中使用的，这是在 React 钩子之前使用它的唯一方法，
• 该innerRef道具是不是在风格组件的当前版本支持了。

这是我的组件的示例片段：

import React, { useRef, useEffect } from 'react';
import styled from 'styled-components';

const StyledInput = styled.input`
  background: transparent;
`

const MyForm = () => {
  const inputRef = useRef(null);
  
  useEffect(() => {
    if (inputRef && inputRef.current) {
      inputRef.current.focus(); //Object is possibly 'null'
    }
  }, []);

  return (
    <StyledInput ref={inputRef}/>
  );
}

我正在使用 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} />
      </>
    ); …