Warning: Received `false` for a non-boolean attribute `comingsoon`.

If you want to write it to the DOM, pass a string instead: 
comingsoon="false" or comingsoon={value.toString()}.

如何在React的自定义属性中传递布尔值？

我正在使用样式组件并通过组件传递属性.这是我如何通过attr的图片.

将布尔自定义attr作为"comesoon"传递

样式组件css道具

在我的样式组件上出现打字稿错误

输入'{孩子：字符串；}' 与类型 'IntrinsicAttributes'.ts(2559) 没有共同的属性

import React from 'react'

import { NotificationSuccess, NotificationError } from '../../styles'

interface IProps {
  error?: boolean;
  message: string;
}

export const Notification = (props: IProps) => {
  const Note = () => props.error ? NotificationError : NotificationSuccess;
  // Error happens on <Note>
  return (<Note>{props.message}</Note>);
}

和样式：

import styled from 'styled-components';

export const NotificationDiv = styled.div`
  z-index: 11;
  position: fixed;
  left: 50%;
  margin-left: -160px;
  top: 1rem;
  padding: 1.5rem;
  width: 320px;
  height: auto;
  text-align: center;
  color: ${props …

const Button = styled.button`
  display: inline-block;
  width: 300px;
  background-color: black;
`    

const ButtonHref = styled.a`
  ${Button}
`   

所以我有两个样式组件。我想继承“按钮”样式但创建另一个标签。我使用反应情绪。我怎样才能做到这一点？

我正在使用样式组件,我正在尝试设置这样的背景图像

const HeaderImage= styled.div`
    background-image: url('../../assets/image.png');
';

我也试过没有引号,就像这样

const HeaderImage= styled.div`
        background-image: url(../../assets/image.png);
 ';

在这两种情况下,我得到相同的结果

http:// localhost:3000/assets/image.png无法加载资源:服务器响应状态为404(未找到)

我正在使用Richard Kall的反应启动器

该文件肯定在指定的位置.

我加载不正确吗？

我应该提一下,我对此很新(React和样式组件)

如果我在项目中添加@ types / styled-components，则在生成输出中会出现很多错误：

ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(36,15):
TS2300: Duplicate identifier 'FormData'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(81,5):
TS2717: Subsequent property declarations must have the same type.  Property 'body' must be of type 'BodyInit', but here has type 'string | ArrayBuffer | DataView | Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array | Blob | FormData'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(107,14):
TS2300: Duplicate identifier 'RequestInfo'.
  ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(126,13):
TS2403: Subsequent variable declarations must have the same type. …

我正在尝试通过TS 中可用的可选链接提供的安全性访问动态属性。然而，这似乎是无效的。

export const theme = {
  headers: {
    h1: {
    },
    h6: {
      color: '#828286'
    },
  },
}
console.info(theme?.headers?.['h6']?.color ?? '#000') //will pass
console.info(theme?.headers?.['h1']?.color ?? '#000') //will fail

错误

Identifier expected.  TS1003

    10 |   const StyledTypography = styled.div`
    11 |     margin: 0;
  > 12 |     color: #000; ${({theme}) => theme?.headers?.[variant]?.color ?? '#000'}
       |                                                ^
    13 |   `
    14 |   return (
    15 |     <StyledTypography as={variant}>

似乎可选更改将应用​​于[]作为类型的可选，但不适用于内部的值。

我怎样才能使这个成为可选而不必做[undefined || someDefaultValue]？

由于我已经实现了服务器端渲染并使用来管理样式styled-components，因此我无法在Chrome开发工具中编辑样式。devtools中的样式变为斜体，并且没有复选框可以关闭/打开指定的样式。

它可以在Mozilla中正常运行。但是为什么不在Chrome中呢？任何想法为什么会发生？谢谢。

注意：它在生产中发生。

我遇到了一个错误说明(通过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 …

我正在使用样式组件并希望定位 的第一个孩子Text，但我无法这样做。

const Text = styled.p`
    font-size: 12px;
    &:first-child {
        margin-bottom: 20px;
    }
`;

... component

return(
   <div>
      <p>I am just regular text</p>
      <p>Me too</p>
      <Text>Hello Joe</Text> // this should have the margin bottom
      <Text>Goodbye</Text >
   </div>
)

我正在使用 Prettier、Eslint 和 Styled 组件 - 反引号样式声明。到目前为止它可以工作，但是 Prettier 以 Eslint 不允许的方式格式化 Styled 组件的条件渲染，并且在格式化之后 Eslint 开始抱怨并且构建失败。

让我通过代码向您展示问题。

Prettier 处理前的初始代码：

// styled components styles apply
const TextInputStyled = styled(TextInputThemed)`
  ${(props: StyledProps) => {
    const {
      theme: { theme10x },
      disabled,
      success,
      error,
    } = props;
    return `
      ${success && `
        border-color: ${theme10x.palette.common.success};
      `};

      ${error && `
        background-color: ${theme10x.palette.common.error};
      `};

      ${disabled && `
        background-color: ${theme10x.palette.background.disabled};
      `};
    `;
  }}

更漂亮的处理后：

// styled components styles apply
const TextInputStyled = styled(TextInputThemed)`
  ${(props: StyledProps) => {
    const …