按钮上的 className 属性不起作用 - Reactjs

Question

It's a cart, I am displaying the total amount of the items added to the cart. I have added different styles to the elements, and everything works fine. But the style on both the buttons won't change.

Cart.js:

import Modal from "../UI/Modal";
import classes from "./Cart.module.css";

const Cart = (props) => {
  const cardItems = (
    <ul className={classes['cart-items']}>
      {[{ id: "c1", name: "Sushi", amount: 2, price: 12.99 }].map((item) => (
        <li>{item.name}</li>
      ))}
    </ul>
  );
  return (
    <Modal>
      {cardItems}
      <div className={classes.total}>
          <span>Total Amount</span>
          <span>35.62</span>
      </div>
      <div className={classes.action}>
          <button className={classes['button--alt']}>Close</button>
          <button className={classes.button}>Order</button>
      </div>
    </Modal>
  );
};

export default Cart;

Cart.module.css:

   
  .actions button {
    font: inherit;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid #8a2b06;
    padding: 0.5rem 2rem;
    border-radius: 25px;
    margin-left: 1rem;
  }
  
  .actions button:hover,
  .actions button:active {
    background-color: #5a1a01;
    border-color: #5a1a01;
    color: white;
  }
  
  .actions .button--alt {
    color: #8a2b06;
  }
  
  .actions .button {
    background-color: #8a2b06;
    color: white;
  }

Answer 1

Change classes.action to classes.actions

import Modal from "../UI/Modal";
import classes from "./Cart.module.css";

const Cart = (props) => {
  const cardItems = (
    <ul className={classes['cart-items']}>
      {[{ id: "c1", name: "Sushi", amount: 2, price: 12.99 }].map((item) => (
        <li>{item.name}</li>
      ))}
    </ul>
  );
  return (
    <Modal>
      {cardItems}
      <div className={classes.total}>
          <span>Total Amount</span>
          <span>35.62</span>
      </div>
      <div className={classes.actions}>
          <button className={classes['button--alt']}>Close</button>
          <button className={classes.button}>Order</button>
      </div>
    </Modal>
  );
};

export default Cart;

Answer 2

You just have a typo in your className in

<div className={classes.actions}>

<div className={classes.actions}> instead of <div className={classes.action}>

It's working if it is classes.actions .

Answer 3

I found your bug

  <div className={classes.action}>
      <button className={classes['button--alt']}>Close</button>
      <button className={classes.button}>Order</button>
  </div>

You're using classes.action but in the css its actions (without s)

solution:

   <div className={classes.actions}>

change action to actions.