当父组件已经定义了样式时，CSS 未按预期在 React Native 中应用

Posted 2023-02-22

【中文标题】当父组件已经定义了样式时，CSS 未按预期在 React Native 中应用

【英文标题】：CSS isn't applied as expected in React Native when parent component already has styles defined

【发布时间】：2018-03-17 15:38:36

【问题描述】：

我需要一些帮助来了解如何在 React Native 中应用 CSS。它似乎不像 web 中的普通 CSS 那样工作。

基本上，我有一个<CardSection> 组件被导入到这个<LoginForm /> 中

这是它的代码：

CardSection.js 导出：

const CardSection = ( children ) => 
    const  containerStyle  = styles
    return (
        <View style=containerStyle>
            children
        </View>
    )


const styles = 
    containerStyle: 
        borderBottomWidth: 1,
        padding: 5,
        backgroundColor: '#fff',
        justifyContent: 'flex-start',
        flexDirection: 'row',
        borderColor: '#ddd',
        position: 'relative'
    

我无法覆盖在此父组件中定义的样式（或者它可能继承的样式）在子元素内。

这是不正确的代码：

LoginForm.js：

renderError() 
    const  errorContainerStyle, errorTextStyle  = styles
    const  error  = this.props

    if (error) return (
        <CardSection style=errorContainerStyle>
            <Text style=errorTextStyle>
                error
            </Text>
        </CardSection>
    )


render() 
    return (
        <Card>
            <CardSection>
                // code removed
            </CardSection>

            <CardSection>
                // code removed
            </CardSection>

            this.renderError()

            <CardSection>
                this.renderLoginButton()
            </CardSection>
        </Card>
    )

这是我目前的造型尝试。我正在尝试center 错误文本，但它不会移动。无论我在errorContainerStyle 上放置什么属性，它都保持在左侧。

const styles = 
    errorContainerStyle: 
        flex: 1,
        lineHeight: 20,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'blue',
        alignText: 'center',
        paddingLeft: 10
    ,
    errorTextStyle: 
        flex: 1,
        fontSize: 20,
        lineHeight: 20,
        justifyContent: 'center',
        alignItems: 'center',
        color: 'red',
    

我阅读并发现了一些传递一组样式的证据，但是当我在每个/两个 CardSection 位置都这样做时，这不起作用。

我真的很困惑，为什么不只是使用我在最靠近孩子的位置传入的样式。为什么连背景都不蓝？

它是 React 16、React Native 0.49 和 android API 级别 23 (Marshmallow)

【参考方案1】：

要使文本居中，请使用

textAlign: 'center'

另见this answer

【讨论】：

该死，我发誓我试过了。我看到我把它弄反了，但我觉得我在两个元素上都尝试了这个，同时使用了 textAlign 和 alignText。它只使用 textAlign: 'center'。它也使用 textAlign 引发错误，但仅当它在父级上时。这个 CSS 很糟糕。谢谢。

我很高兴我只是没有合适的财产。我开始认为 React Native CSS 完全不合逻辑。我现在也连接了 react-devtools，这让我可以轻松地动态编辑 CSS。

【参考方案2】：

要居中对齐，请使用以下命令：

textAlign: 'center' !important ;

或根据您的代码使用下面给出的同一行代码

const styles = 
errorContainerStyle: 
    flex: 1,
    lineHeight: 20,
    justifyContent: 'center' !important,
    alignItems: 'center'!important,
    backgroundColor: 'blue',
    alignText: 'center'!important,
    paddingLeft: 10
,
errorTextStyle: 
    flex: 1,
    fontSize: 20,
    lineHeight: 20,
    justifyContent: 'center' !important,
    alignItems: 'center' !important,
    color: 'red',

这应该可以工作

【讨论】：

谢谢，错误文本元素上的 textAlign 是修复它的原因。您的代码正在利用一些 CSS 优先级，但我无法按原样运行这些道具。我的 ES Lint 告诉我我需要打字稿。不过，我很感谢关于 onLoad 优先级的提醒。