ReactJS применяет несколько встроенных стилей

Скажем, у меня есть следующие стили:

const styles = StyleSheet.create({
padding: {
  padding: 10
},
margin: {
  margin: 10
}
});

и я хочу применить их оба к реагирующему компоненту?

Ответы

Ответ 1

В то время как я сделал некоторые исследования для этого, ответ не является явным, одно предложение:

<View style={Object.assign({}, styles.padding, styles.margin)}>
    ...
</View>

Object.assign() принимает список аргументов и объединяет их, однако, если вы не передаете первый пустой объект, он перезапишет первый аргумент, поэтому, если вы хотите, чтобы стили были чистыми, вам нужно передать их.

Однако, как реагировать 0.27.2, я получил ошибку asign, пытающуюся это сделать.

Дальнейшее чтение показало:

<View style={StyleSheet.flatten([styles.postHeader, styles.flowRight])}>
  ...
</View>

Работает просто отлично, но это очень многословно и не очень интуитивно, после того, как я нашел другой фрагмент:

<View style={[styles.postHeader, styles.flowRight]}>

Для всех целей и целей это было то, что я искал.

Я просто подумал о том, чтобы поделиться этим знанием здесь, поскольку это кажется довольно очевидным, но я не мог найти для него никакой документации.

Ответ 2

Самое простое решение, я использую его во встроенном CSS

 <div style={{color: "yellow", fontSize: 24}}>Style Me</div>

или используйте добавление классов как

 <div className="section-spac banner-with-whitebg">Style Me</div>