我无法设置react-slick-slider的高度

Question

我正在创建一个带有反应效果的轮播：一个建筑物有3个级别（图中的那些大的蓝色div），然后我将它们放置在代表办公室的每个两行轮播中。点击后，它们的颜色将从白色变为红色，然后相反。

结构（我使用classNames而不是“ div”作为标记名，但是它们都是div）：

<level1>
    <label>that white label div on the left of a level</label>
    <cards>the blue part of the level div...
        <slider-container>
            <Slider>
                <Card1 class="red" or "white">I created this react class</Card1>
                <Card2></Card2>
                <Card3></Card3>
                ...
            </Slider>
        </slider-container>
    </cards>  
</level1>
<level2>...same</level2>
<level3>...same</level3>

很难在容器div中适应滑块的宽度，现在已经完成了，但是以某种方式我无法在其容器div中容纳高度为100％的滑块（有剩余空间），添加固定大小（以像素为单位），这是可行的，但是我需要使其具有响应性，因此，如果容器div的高度发生变化，我也需要滑块更改其自身的高度。

我在开发人员工具中检查了以下图片，该层次结构中的每个div都具有“ height：100％”样式，但是仍然没有。

1-slider-container fills the level ("cards" div)

在这里，我无法访问元素，这些元素来自react-slick-slider的Slider组件：

2-slick-slider fills slider-container

3-slick-list fills slick-slider

4-slick-track fills slick-list

5-I don't know what this slick-slide div does, but can't see it's height

6-and here is my own created Card in it

最后我也向您展示我的代码。这是Card类

export default class Card extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cardClass:"",
            textClass:"",
        };   
    }
    componentDidMount(){
        if (this.props.firm.status) {
            this.setState({cardClass:"red-card"});
            this.setState({textClass:"white-text"});
        } else {
            this.setState({cardClass:"white-card"}); 
            this.setState({textClass:"blue-text"});
        }
    }
    render() {
        return (
            <div className={this.state.cardClass}>
                <p>{this.props.firm.firmName}</p>
                <p>{this.props.firm.officeNumber}</p>
            </div>
        );
    }
}

SlickSlider类（Slider是从react-slick-slider导入的）：

export default class SlickSlider extends Component {
    render() {
        const settings = {
            arrows: false,
            slidesToShow: 7, 
            speed: 500,
            rows: 2,
            slidesPerRow: 1,
            slidesToScroll: 2
        };
        return (
            <div className="slider-container">
                <Slider {...settings}>
                    <Card firm={{firmName:"ceg1", officeNumber:"134", status:true}}/>
                    <Card firm={{firmName:"ceg2", officeNumber:"111", status:false}}/>
                    <Card firm={{firmName:"ceg3", officeNumber:"222", status:true}}/>
                    <Card firm={{firmName:"ceg4", officeNumber:"111", status:false}}/>
                </Slider>
            </div>
        );
    }
}

其中哪个属于Level类：

export default class Level extends Component {
    constructor(props) {
        super(props);   
    }
    render() { 
        return (
            <div className="level">
                <div className="label">
                    <p className="level-label">{this.props.level}. emelet</p>
                </div>
                <div className="cards">
                    <SlickSlider></SlickSlider>
                </div>
            </div>
        );

} }