固定冲突：“边界左派”不是有效的样式属性

Question

我在React原生项目中使用样式化组件，并试图在文本组件中设置左边界。

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;
`;

问题是，在添加左边框：1px实心#000并重新加载应用程序后，它会显示：“不变冲突：'borderLeft'不是有效的样式属性”。

如何使用样式化组件给组件添加左边框？

Answer 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
`;

有关可用属性，请参考以下链接-

布局道具

样式表指南

Answer 2

我不相信可以在react native中的组件上直接设置border left(或top，right，bottom)样式属性。这可能是导致错误的原因，因为在react native中没有从< code>border-left到任何等效样式属性的映射。

最好的方法可能是按如下方式显式指定每条边的边界属性值:

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;
`;