ant design mobile V5.22里的轮播图组件引入后调整不了轮播图的高度？

Question

轮播图js文件代码如下：

import React from 'react';
import { Space, Swiper } from 'antd-mobile';
import styles from './demo2.css';
const colors = ['red', 'yellow', 'blue', 'green'];
const items = colors.map((color, index) => (<Swiper.Item key={index}>
    <div className={styles.content} style={{ background: color }}>
      {index + 1}
    </div>
  </Swiper.Item>));
export default () => {
    return (
        <Space direction='vertical' block>
          <Swiper indicatorProps={{
            color: 'white',
        }} defaultIndex={0} loop autoplay>
            {items}
          </Swiper>
        </Space>
    );
};

轮播图样式文件代码如下：

import React from 'react';
import { Space, Swiper } from 'antd-mobile';
import styles from './demo2.css';
const colors = ['red', 'yellow', 'blue', 'green'];
const items = colors.map((color, index) => (<Swiper.Item key={index}>
    <div className={styles.content} style={{ background: color }}>
      {index + 1}
    </div>
  </Swiper.Item>));
export default () => {
    return (
        <Space direction='vertical' block>
          <Swiper indicatorProps={{
            color: 'white',
        }} defaultIndex={0} loop autoplay>
            {items}
          </Swiper>
        </Space>
    );
};

样式文件里轮播图高度为120px，但浏览器界面显示如下：

请问调整不了轮播图高度的原因是什么？如何解决？

Answer 1

你审查元素看看加上了没有 怀疑没加上