Javascript React JS内联样式不适用 render（）{ 常量样式={ maxHeight:“自动” } 返回(

我试图为

sticky-social-share\u图标
元素实现内联CSS，但它工作不正常。
将高度设置为自动，而不是最大高度：

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}>

max height
应使用一些度量值，如
em
、
%
、
px
等，具有特定值

height: 'auto'

据我所知，您应该使用
min height
：

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

此外，您可以通过使用和运算符来避免三元运算符：

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

只有当
This.state.open
返回truthy值时，才会应用
styles
对象。
CSS max height属性没有
auto
值。此外，您可以使用
className={This.state.open&&'open'}
和
style={This.state.open&&styles}避免三元条件运算符
。除此之外，您的代码应该可以正常工作。@sanddyyyy-这是答案。：-）有趣的是，但是Chrome说
auto
是一个无效的值。Sooraj-您的代码可以与其他样式值配合使用：
max height
属性只能是
viewport
at规则中的
auto
。这是通常情况下的
max height
属性。
style={this.state.open && styles}