Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the color of the Card's Title text?

I'm just getting started with React Native and using Paper for UI elements. I'm using a card layout for my current screen:

{cardData.map((card, index) => {
    return(
    <Card key={index}>
      <Card.Title title="Card Title" subtitle="Subtitle" style={styles.cardHeader} />
      <Card.Content>
        <Paragraph>{card.content}</Paragraph>
      </Card.Content>
      <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
      <Card.Actions>
        <Button>Cancel</Button>
        <Button>Ok</Button>
      </Card.Actions>
    </Card>
    )
})}

I'm trying to change the color of the title section to green, an the color of the text to white. So I have the following style:

const styles = StyleSheet.create({
  cardHeader: {
    backgroundColor: '#00bc8c',
    color: '#ffffff'
  }
});

Strangely the background color changes as expected, but the text color remains black. Could anyone suggest why this may be the case?

like image 852
RiddleRiddlerRddler Avatar asked Sep 14 '25 18:09

RiddleRiddlerRddler


1 Answers

As suggested by Nooruddin, but with a code sample:

titleStyle={{ color: "#f00" }}
like image 78
Daniel Danielecki Avatar answered Sep 16 '25 08:09

Daniel Danielecki