Unable to alter CSS styles by id-CodePudding

I have a very simple div in my footer:

import React from "react";
import { useHistory } from "react-router-dom";
import style from "./DesktopFooter.module.css";

const DesktopFooter = () => {
  const history = useHistory();

  return (
    <div className={style.container}>
      <div className={style.footerNav} id="phoneNumber">
        999-999-9999
      </div>
      <div className={style.footerNav}>

      </div>
      <div className={style.footerNav}></div>
    </div>
  );
};

export default DesktopFooter;

In my CSS I want to style both on the class and id:

.footerNav {
  width: 50%;
  display: flex;
}

#phoneNumber {
  font-size: 2rem;
}

However my component is not recognizing the id styling I try to apply.

Could anyone point me in the right direction.

CodePudding user response：

Ya, After you update a question, I found the issue, you are try to load style for id as normal Dom, but its will not work since you are not include css file as is, you are import style file to style param...

so, what you need to do is replace id="PhoneNumber" to this

<div className={styles["footerNav"]} id={styles["phoneNumber"]}>
        999-999-9999
      </div>

Check the demo url

Full Code:

import React from "react";
import style from "./MyComponent.module.css";

export default function App() {
  return (
    <div className={style.container}>
      <div className={style["footerNav"]} id={style["phoneNumber"]}>
        999-999-9999
      </div>
      <div className={style.footerNav}></div>
      <div className={style.footerNav}></div>
    </div>
  );
}

CodePudding user response：

I would suggest having it as either a class or an id. Classes usually have a higher priority, meaning that the id will be ignored. This is what it should look like:


    .phoneNumber {
     font-size: 2rem;
     width: 50%;
     display: flex;
     }


    <div class = "phoneNumber">999-999-9999</div>

However, if you would like to get around this, I would use another element within the div, such as:


    #myID{
    font-size: 2rem;
    }
    .phoneNumber {
    width: 50%;
    display: flex;
    }


    <div class = "phoneNumber">
    <p id="myID"> 999-999-999 </p>
    </div>

CodePudding user response：

Ok I found a solution, or at least a work around. The problem seems to be that the file was a css module and not just a css file.

I changed the name of the css file from DesktopFooter.module.css to DesktopFooter.css

and I changed my import statement from

import style from "./DesktopFooter.module.css" to import "./DesktopFooter.css

CodePudding user response：

.footerNav {
        text-align: center;
        padding: 3px;
        background-color: #56efd9;
        color: white;
    }
    
    #phoneNumber {
        font-size: 2rem;
    }
    <body>
    
  <div class = "footerNav">
        <p id="phoneNumber">999-999-999</p>
    </div>
    
    </body>

But the method is better in my opinion

<html>
<head>
    <style>
        footer {
            text-align: center;
            padding: 3px;
            background-color: #56efd9;
            color: white;
        }
    </style>
</head>
<body>

<footer>
    <p>999-999-999</p>
</footer>

</body>
</html>