How to add extra style besides styles object for one element?

Question

I saw one example few months ago where was added extra style to the same element like this:

<Button style={ styles.button && backgroundColor: '#222222'}> 
<Text> Learn more </Text>
</Button>

But can't remember how was the right syntax. It's not working now. How can this code be fixed?

score 3 · Accepted Answer · answered Jul 11 '18 at 09:46

You have couple of options.

Option 1:

You can spread the object and add the desired one after.

<Button style={{ ...styles.button, backgroundColor: '#222222'}}> 
  <Text> Learn more </Text>
</Button>

Option 2:

You can use Object.assign() to clone and add more properties to your object.

<Button style={Object.assign({}, styles.button, { backgroundColor: '#222222'})}> 
  <Text> Learn more </Text>
</Button>

Option 3:

style prop can have an array of objects.

<Button style={[styles.button, { backgroundColor: '#222222'}]}> 
  <Text> Learn more </Text>
</Button>

This should be the approved answer. – KittyCat Jul 12 '18 at 03:27 — KittyCat, Jul 12 '18 at 03:27

score 0 · Answer 2 · answered Jul 11 '18 at 09:46

0

You can do it by passing an array of styles

<Button style={[styles.button, { backgroundColor: 'white' }]} />

answered Jul 11 '18 at 09:46

Poptocrack

2 Answers2