React Native 边框右/左颜色不起作用

Question

我在 React Native 中使用

styled-components

，问题是

border-left-color

和

border-right-color

字段不执行任何操作。边框顶部和底部字段功能正常。使用

StyleSheet

时也存在同样的问题。我正在 Android 模拟器上测试。

我到处寻找解决方案，但找不到任何答案，因为似乎没有人遇到同样的问题。

这是一个简单的演示：

import styled from 'styled-components/native'
import { TextInput as NativeTextInput } from 'react-native'
import theme from '../components/theme'

const formFieldBaseStyle = css`
  background-color: ${theme.colors.appBackground};
  margin: 5px;
  padding: 5px;
  border-width: 1px;
  border-color: ${theme.colors.borderLight}
`

const TextInput = styled(NativeTextInput).attrs({
  placeholderTextColor: theme.colors.textSecondary,
})`
  ${formFieldBaseStyles}
  color: ${theme.colors.textPrimary};
  font-size: ${theme.fontSizes.body};
  padding-left: 10px;
  padding-right: 10px;
  border-left-color: #F00
`

Answer 1

问题是，由于某种原因

border-left-color

和

border-right-color

没有覆盖

border-color

值，但由于某种原因

border-top-color

和

border-bottom-color

覆盖了。单独定义所有边框颜色解决了这个问题。这可能是一个错误。

解决方案：

const formFieldBaseStyle = css`
  background-color: ${theme.colors.appBackground};
  margin: 5px;
  padding: 5px;
  border-width: 1px;
  /* Colors must be defined individually so they can be overridden*/
  border-left-color: ${theme.colors.borderLight};
  border-right-color: ${theme.colors.borderLight};
  border-top-color: ${theme.colors.borderLight};
  border-bottom-color: ${theme.colors.borderLight};
`

Answer 2

对我来说，当我将

borderLeftColor:'red'

替换为

borderStartColor:'red'

这样

const formFieldBaseStyle = css`
  background-color: ${theme.colors.appBackground};
  margin: 5px;
  padding: 5px;
  border-width: 1px;
  borderStartColor:'red';
`