【问题标题】:Invariant Violation: "borderLeft" is not a valid style property不变违规:“borderLeft”不是有效的样式属性
【发布时间】:2019-01-12 11:34:03
【问题描述】:

我在一个 React Native 项目中使用styled-components,我正在尝试在文本组件中设置左边框。

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

const TitleText = (props) => {
  return (
    <Text>{props.text}</Text>
  );
};

const Text = styled.Text`
  font-family: ${props => props.theme.fontFamily};
  color: ${props => props.theme.darkBlue};
  border-left: 1px solid #000;
`;

问题是添加border-left: 1px solid #000并重新加载应用后显示:“Invariant Violation: "borderLeft" is not a valid style property”。

如何使用样式化组件为该组件添加左边框?

【问题讨论】:

    标签: reactjs react-native styled-components


    【解决方案1】:

    以下更改应该可以解决问题-

    import React, { Component } from 'react';
    import styled from 'styled-components';
    
    const TitleText = (props) => {
     return (
      <Text>{props.text}</Text>
     );
    };
    
    const Text = styled.Text`
    font-family: ${props => props.theme.fontFamily};
    color: ${props => props.theme.darkBlue};
    border-left-width: 1px;
    border-left-style : solid;
    border-left-color : #fff
    `;
    

    有关可用属性,请参阅以下链接 -

    Layout Props

    StyleSheetGuide

    【讨论】:

      【解决方案2】:

      我不相信直接在 react native 的组件上设置边框左(或上、右、下)样式属性是可能的。 这可能是您的错误的原因,因为没有从 border-left 到 react native 中任何等效样式属性的映射。

      最好的办法可能是明确指定每边的边框属性值,如下所示:

      const Text = styled.Text`
        font-family: ${props => props.theme.fontFamily};
        color: ${props => props.theme.darkBlue};
      
        /* Note that react native typically requires the same 
           border style to be applied to all sides of a component 
           that supports borders */
        border-style: solid; 
      
        /* Most components in react native support unique border width and 
           colors on each side of the component */
        border-left-color: #000; 
        border-left-width: 1px;
      `;
      

      【讨论】:

        猜你喜欢
        • 2016-04-30
        • 2017-03-15
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-11-02
        • 2018-01-03
        • 1970-01-01
        • 2020-05-06
        相关资源
        最近更新 更多