使用 SCSS 设置 create-react-app 样式的问题

Question

I am trying to implement SASS styling on a component. Here is the Component.js file:

import React from "react";
import "../../assets/scss/_callme.scss"    

function Component() {
  return (
    <div>
      <a href="#" className="phoneMe" >
      </a>
    </div>
    
  );
}
export default Component;

And here is the _callme.scss file:

.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";
  }
}

I think there is a synthax error somewhere, but I couldn't find. Or maybe the problem is at importing or naming the file. Can you help?

Answer 1

I think your problems are the following

First match the selector by adding class "component", prefer lowercase class names.

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

and second remove "" for property values in 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;
  }
}