Встроенный стиль react js не применяется

render() { 
  const styles = {
    maxHeight: 'auto'
  }
  return (
    <div styleName="sticky-social-share" className={this.state.open ? 'open': null} >
      <ul styleName="sticky-social-share__icons" style={this.state.open ? styles : null}>

Я пытался реализовать встроенный CSS для элемента sticky-social-share__icons, но он не работал должным образом.

Свойство CSS max-height не имеет значения auto

sdabrutas 10.09.2018 09:00

Кроме того, вы можете избежать тернарного условного оператора, используя className={this.state.open && 'open'} и style={this.state.open && styles}. В остальном ваш код должен работать нормально.

sdabrutas 10.09.2018 09:04

@sandddyyyy - Это ответ. :-) Интересно, что MDN утверждает, что это, но Я не вижу этого в CSS 2.1 и Chrome говорят, что auto - недопустимое значение. Sooraj - Ваш код отлично работает с другими значениями стиля: jsfiddle.net/4kw01gdL

T.J. Crowder 10.09.2018 09:04

Свойство max-height может быть только auto в правиле viewport. В обычных обстоятельствах это фактическое использованиеmax-height.

sdabrutas 10.09.2018 09:09
0
4
1 169
1

Ответы 1

Установите высоту на авто, а не на максимальную высоту:

height: 'auto'

max-height должен иметь определенное значение с использованием некоторой меры, такой как em, %, px и т. д.

height: 'auto',
maxHeight: '300px'

Насколько я понимаю, вы должны использовать min-height:

height: 'auto',
minHeight: '300px'

Кроме того, вы можете избежать тернарного оператора, используя оператор а также:

style={this.state.open && styles}

Это применит объект styles, только если this.state.open вернет истинное значение.

Другие вопросы по теме

Похожие вопросы