不变违规：“borderLeft”不是有效的样式属性答案

【问题标题】：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;
`;

【讨论】：