0

我正在使用 mdi-react 包并将其与 scss 结合以定义一些样式，但 font-size 属性不起作用。其他一切（如颜色属性）都在工作。

我在互联网上搜索了它，但找不到解决方案，所以最终决定在 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;
}
}
4

2 回答 2

0

根据文档，要更改图标的大小，您应该使用 size 属性。

检查以下链接：

https://github.com/levrik/mdi-react#usage

于 2020-06-17T18:51:03.877 回答
0

那是因为.cube实际分配给 SVG 元素，这需要您使用高度和宽度来更改它的大小。字体不会因此而工作。

（我假设您认为它是一个字体图标，或者当color属性被应用到它时，但它确实这样做了，因为fill它设置为currentColor，它使用当前的文本颜色。）

在此处输入图像描述

于 2020-06-17T18:58:08.783 回答