Why are my styles not working when referenced from the .module.scss file?

Here is the code snippet from my Sublayout.module.scss file:

.pl-6 {
    padding-left: 6rem !important;
}
.pr-6 {
    padding-right: 6rem !important;
}
.pl-12 {
    padding-left: 12rem !important;
}
.pr-12 {
    padding-right: 12rem !important;
}

After importing styles from Sublayout.module.css, I encountered an issue where the classNames were not being applied and showing as undefined. Here's how I tried to implement it in my component:

import { FC, ReactNode } from "react";
import { Grid } from "@payping/web-components";
import styles from "./Sublayout.module.scss";

interface Props {
  children?: ReactNode;
  className?: string;
}

export const SubLayout: FC<Props> = (props: Props) => {
  const { children, className } = props;
  const sizes = Grid.useBreakpoint();

  // Handling different screen sizes
  if (sizes.xxl) {
    console.log("xxl screen");
    return <div className={`${styles.pr12} ${styles.pl12} w-100 ${className}`}>{children}</div>;
  }
  // More condition checks for other screen sizes...

  return <div className={`ps-6 pe-6 w-100 ${className}`}>{children}</div>;
};

Answer №1

the issue stemmed from the naming of my classes in Sublayout.module.scss file:

view image explanation

I then made adjustments to my class names in Sublayout.module.scss :

.pl6 {
    padding-left: 6rem !important;
}
.pr6 {
    padding-right: 6rem !important;
}
.pl12 {
    padding-left: 12rem !important;
}
.pr12 {
    padding-right: 12rem !important;
}

After these changes, everything worked smoothly and I am relieved :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to position this span on the right side of the div?

Here is some HTML code snippet: <div class="title"> <span>Cumulative performance</span> <span>20/02/2011</span> </div> This is the corresponding CSS: .title { display: block; border-top: 4px solid #a7a ...

In JSF, the loading bar is hidden before the page is completely loaded

Currently, I am facing an issue with the loading bar. It seems to disappear before the page content is fully loaded. Ideally, I would like the loading bar to remain visible until the entire page has been loaded correctly. In the layout.xhtml file, I have ...

The "Boostrap Confirmation" plugin in JQuery fails to appear upon the second click

After changing the confirmation method from an MVC Action to an Ajax method, I noticed that the confirmation box does not appear when clicking a second time. It seems to have stopped working possibly because the page is no longer being refreshed. How can ...

Can't access innerText in Firefox

This is the code snippet I'm having trouble with: <div id="code">My program<br />It is here!</div> <script type="text/javascript"> var program=document.getElementById('code'); ShowLMCButton(program.innerText); </s ...

React 18 and Chakra UI integration encountering issues with JSX validity

Is there a way to integrate Chakra UI code with React 18 in a Next.js application? Encountering an error when trying to use a component that starts with a Stack component: Error message: Unexpected token Stack. Expected jsx identifier Tried wrapping th ...

Is there a way to prevent inheriting width properties? Or perhaps how can one revert back to the original width value

After installing the Thank you plugin, I noticed that the button on my test site appears to be strange. Upon further investigation, I discovered that it is inheriting #commentform textarea { width: 45%; } from my theme. While removing the width in the CSS ...

Utilizing Flexbox for Nested Columns

I am attempting to nest flexbox columns inside a flexbox layout. This is the HTML code I have: <div class="container"> <div class="row flex height"> <div class="col-md-6 red"> </div> <div class="col-md-6 orange"> ...

Having trouble accessing a variable from the material theme in Angular 7

Currently, I am working with Angular 7.0.3 and endeavoring to establish an scss variable with the primary color of my material theme. // src/styles/_variables.scss @import "~@angular/material/theming"; @include mat-core(); $app-primary: mat-palette($mat-i ...

Strategies for determining the direction of a slide event within a Bootstrap carousel

I am attempting to identify the direction of the slide in a Bootstrap 4 carousel when the user initiates the slide event. Is there a method to achieve this? $('#myCarousel').on('slide.bs.carousel', function () { //Determine wheth ...

Can you explain the purpose of a <div> element that is empty except for the CSS property clear:both?

Can anyone shed light on the significance of this particular tag that I stumbled upon in a legitimate html document that I recently acquired? <div style="clear: both;">&nbsp;</div> I appreciate any assistance you can offer. ...

What are some creative ways to incorporate a variety of images into my website?

Currently working on a webpage and running into an issue. I have a div called "background" where I am loading several images using the <img>-tag. The problem is that the images are set to float:left;, causing them to wrap onto a new line as they can& ...

A Vue.js trick to modify the element's class within a v-for loop when hovering in and out

I'm having trouble changing the class of a single element within a v-for loop based on mouseenter/mouseleave events. I want only the hovered element to change its class, but currently, all elements in the list are affected. I attempted binding the cl ...

Issue with CSS rendering in Internet Explorer

Although my website appears perfectly in Firefox, the entire style sheet doesn't seem to load properly in IE 7. It's only displaying certain styles. Any assistance on this issue would be greatly appreciated! ...

confirm that the form is necessary and contains text

How can I ensure that a specific text string is validated for the input field labeled "promo"? Take a look at the code snippet below: <script> function validateForm() { var x = document.forms["myInquiry"]["promo"].value; if (x == null || x == "") ...

Conceal certain components when a user is authenticated

Below is the content of my app.component.html: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class='container'> <ul class="nav navbar-nav"> <li class='nav-item'> <a clas ...

Having trouble with the npm package installation for react-circular-progressbar

I encountered an error when trying to install react-circular-progressbar in my React projects. Why is this happening? npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/em ...

Is there a way to alphabetically and numerically organize a table in vue.js?

Currently, I am implementing sorting functionality for a table using vue.js. While I have successfully achieved ascending sorting for numbers, I am facing challenges with getting the descending and alphabetical sorting to function properly. Below is the H ...

Quickly redesigning the appearance of file input using javascript and jquery. Seeking assistance to correct css issues on jsfiddle

Hey there, I've been working on styling the input[type="file"] element and could use some assistance. Like the saying goes, "One JSfiddle is worth 1000 words," so here's the link to my example: --- For more details, click here: http://jsfiddle.n ...

Issue with iPad CSS floats causing layout problems?

Having a css challenge with the layout on ipad for this particular website: When viewing on a browser, the social media icons align correctly to the right. However, on an iPad or iPhone, they are not aligned all the way to the right. Is there anything tha ...

Reorder elements in CSS Grid

I've been working with a css-grid and it's almost there, but I'm stuck on reordering the items in a specific way. Currently, the html layout is set as “1, 2, 3, 4,…10”, but for smaller screens, I want the visual order to be “1, 2, 4 ...