我使用mdi-react包来制作图标，但是当把它和scss结合起来的时候，"font-size "属性就不能用了。

Question

我正在使用mdi-react包，并将其与scss结合起来定义一些样式，但是字体大小的属性不能用，其他所有的东西（比如颜色属性）都能用。

我在网上找了很多，但都没有找到解决办法，所以最后决定在stackoverflow上写下我的第一个问题。

我知道我可以在图标组件本身使用size="8rem"，但由于一些原因，我不想这么做。

这是我的Home.js文件。

import React from 'react';
import { Helmet } from 'react-helmet';
import CubeOutlineIcon from 'mdi-react/CubeOutlineIcon';
import { Link } from 'react-router-dom';

const home = () => (
    <>
        <Helmet><title>Quiz App - Home</title></Helmet>
        <div id="home">
            <section>
                <div>
                    <CubeOutlineIcon className="cube" />
                </div>
                <h1>Quiz App</h1>
                <div className="play-button-container">
                    <ul>
                        <li><Link to="/play/instructions">Play</Link></li>
                    </ul>
                </div>
                <div className="auth-container">
                    <Link to="/login">Login</Link>
                    <Link to="/register">Register</Link>
                </div>
            </section>
        </div>
    </>
);


export default home;

这是我的home.scss文件

#home {
background-image: url('../../assets/img/bg1.jpg');
background-size: cover;
background-position: center;
display: flex;
justify-content: space-around;
height: 100vh;

section {
    background-color: rgba($color: #000000, $alpha: 0.7);
    padding: $normal $md;
    height: 80%;
    width: 35%;
}

.cube {
    font-size: 8rem;  //Not working
    color: $orange;
}
}

Answer 1

那是因为 .cube 实际上是分配给SVG元素的，这就需要你使用高度和宽度来改变它的大小。因此，字体是行不通的。

(我假设你认为它是一个字体图标，或者像 color 属性被应用到它身上，但它这样做是因为 fill 设为 currentColor(使用当前的文本颜色。)

Answer 2

根据文档，要改变图标的大小，你应该使用大小属性。

请查看以下链接。

https:/github.comlevrikmdi-react#usage