使用SCSS创建react应用程序时出现样式问题

Question

我正在尝试在组件上实现SASS样式。这是Component.js文件：

import React from "react";
import "../../assets/scss/_callme.scss"    
function Component() {
return (
<div>
<a href="#" className="phoneMe" >
</a>
</div>

);
}
export default Component;

这是_callme.scss文件：

.Component {
.phoneme {
position: "fixed";
display: "flex";
border-radius: 30;
padding: 0;
margin: 20;
align-items: "center";
justify-content: "center";
right: 0;
bottom: 0;
height: 50;
width: 50;
background: "green";
color: "white";
}
}

我想某个地方有语法错误，但我找不到。或者问题出在导入或命名文件上。你能帮忙吗？

Answer 1

我认为您的问题是以下

首先通过添加类"来匹配选择器；部件"；，喜欢小写的类名。

function Component() {
return (
<div className="component">
<a href="#" className="phoneme" >
</a>
</div>

);
}

第二次去除"用于css 中的属性值

.component {
.phoneme {
position: fixed;
display: flex;
border-radius: 30;
padding: 0;
margin: 20;
align-items: center;
justify-content: center;
right: 0;
bottom: 0;
height: 50;
width: 50;
background: green;
color: white;
}
}