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