Question 200362 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – selector in SCSS not getting property value

I am trying to change value of font-size for class .cart__icon (fa fa-shopping-cart) in my Header.module.scss file. I was even trying to test if !important set will change something but its not.
App.js file:

 import Header from "./components/Header/Header";
 import "./App.css";

 function App() {
 return (
 <div>
  <Header />
 </div>
);
}

export default App;

Header.jsx file:

import styles from "./Header.module.scss";
const Header = () => {
return (
<header className={styles.header}>
  <div className={styles.container}>
    <div className={styles.header__wrapper}>
      <div className={styles.logo}>
        <h1 className={styles.logo__title}>
          <span>Mamma</span>Mia!
        </h1>
        <h2 className={styles.logo__subtitle}>
          the best homemade italian food
        </h2>
      </div>
      <div className={styles.cart}>
        <div className={styles.cart__summary}>
          <span className={styles.cart__total_number}>0</span>
          <span className={styles.cart__total_price}>
            Total price: <strong>$0</strong>
          </span>
          <i className="fa fa-chevron-down"></i>
          <i className="fa fa-shopping-cart cart__icon"></i>
        </div>
      </div>
    </div>
  </div>
</header>
);
};

 export default Header;

Sass:

*,
*::before,
*::after {
box-sizing: border-box;
}
.header {
 padding: (12px * 5) 0;
 background: #333;
 color: #fff;
 
 &__wrapper {
 position: relative;
 }
.container {
 max-width: 700px;
 margin: 0 auto;
 padding: 0 20px;
}
}

.logo {
 display: inline-block;
 line-height: 1;

 &__title {
 margin: 0 0 12px 0;
 font-size: (12px * 4);
 font-family: "Oswald", sans-serif;
 font-weight: 300;
 text-transform: uppercase;

 span {
 font-weight: 700;
 }
 }

 &__subtitle {
 margin: 0;
 font-size: (12px * 1.5);
 font-weight: 300;
 font-style: italic;
 }
 }

  /////////////////////////////////////////////
 .cart {
  position: absolute;
  width: 270px;
  right: 0;
  top: 12px;
  padding: 12px 18px;
  background: #fff;
  border-radius: 4px;
  color: #ff6b6b;
  font-size: 12px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
  z-index: 9999;

  &.active {
 .cart__content {
  transform: translate(0, 0);
  max-height: 1000px;
  opacity: 1;
  padding: (12px * 1.5) 0 0 0;
  }
  }

  &__summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-transform: uppercase;
  cursor: pointer;
  }

  &__icon {
  font-size: 24px !important;
  }

  &__total_number {
  background: #ff6b6b;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 28px;
  }

  &__total_price {
  color: #333;
  }

  &__content {
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease-in-out;
  max-height: 0;
  transform: translate(0, 50%);
  opacity: 0;
  animation: flipdown 0.5s ease both;
  color: #333;
  }

  &__order_summary {
  li {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  }

  .widget_amount {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: space-between;
  margin: 0 12px 0 0;

  input {
    margin: 0;
    width: (12px * 2);
    height: (12px * 2);
  }

  &:hover .btn-quantity--lt {
    opacity: 1;
  }
  }
  }

  &__product_name {
  width: 150px;
  }

  &__action_buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 0;

  i {
  font-size: 14px;
  }

  li {
  margin: 0 0 0 12px;
  }

  a {
  color: #ff6b6b;

  &:hover {
    color: lighten(#ff6b6b, 3%);
  }
  }
  }

  &__order_price {
  margin: 0;
  padding: 12px 0;
  list-style-type: none;
  border-top: 1px solid lighten(#333, 70%);

  li {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  }
  }

  &__order_confirmation {
  border-top: 1px solid lighten(#333, 70%);
  padding: 12px 0 0 0;

  input,
  button {
  width: 100%;
  margin-bottom: (12px * 0.5);
  }
  }
  }

font-size of this element is inherited but i can not find the answer how to change this property value is sass.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    finally i found the answer for question of mine: instead of this:

     <i className="fa fa-shopping-cart cart__icon"></i>

    I used it:

     <i className={"fa fa-shopping-cart" + " " + styles.cart__icon}></i>

    if some1 can find another solution i will be gratefull.


  2. 0

    I think I came across a similar problem long time ago. In my case, the fa class was overriding the remaining two classes. So I did something like:

    .fa {
  font-size: 24px;
}

    Alternatively, you could set the height and width of the icon instead of font-size. I think you should look into the browser DevTools/Elements tab to investigate what the problem is. See what class and property is being applied.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search