Error: The selector "button" cannot be used in its current form as it is not pure. Pure selectors must include at least one local class or ID

                <button onClick={() => resetBoard()}>
                    Reset Board
                </button>

While trying to import an external CSS file as a module, I encountered a problem. The CSS file looks like this...

button {
    background-color: #111827;
    border: 1px solid transparent;
    border-radius: .75rem;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    flex: 0 0 auto;
    font-family: "Inter var";
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5rem;
    padding: .75rem 1.2rem;
    text-align: center;
    text-decoration: none #6B7280 solid;
    text-decoration-thickness: auto;
    transition-duration: .2s;
    transition-property: background-color, border-color,
        color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, 0.2, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    width: auto;
}

button:hover {
    background-color: #374151;
}

button:focus {
    box-shadow: none;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .button {
        padding: .75rem 1.5rem;
    }
}

;

I am looking to style the button tag which is imported as a module from the app.module.css file.

cssnext.jssyntax-errorstylingcss-modules

Answer №1

In order to properly utilize the css module, make sure to import and apply it as shown below:

import styles from './app.styles.css';

<button className={styles.button}>Press here</button>

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

Adjusting the height of an element based on changes in screen width or height using Angular

I'm in the process of developing a directive that can detect changes in screen size, either width or height, and adjust the height of my element accordingly. The main goal is to have my element extend all the way to the bottom of the browser window. ...

angularjscssangularjs-directive

Issues with jQuery animate not functioning properly when triggered on scroll position

I found a solution on Stack Overflow at this link, but I'm having trouble implementing it properly. The idea is to make an element change opacity from 0 to 1 when the page is scrolled to it, but it's not working as expected. The element is locat ...

jquerycss

JavaScript does not function properly with dynamically loaded content

Trying to load the page content using the JQuery load() method. See below for the code snippet: $(window).ready(function() { $('#content').load('views/login.html'); }); .mdl-layout { align-items: center; justify-content: center ...

javascriptjqueryhtmlcssajax

Positioning elements in CSS using percentages allows for flexible and responsive

I am new to web design and I am trying to create a webpage similar to the one shown in this image. However, I want to set the height and width of the divs using percentage values instead of pixels. Whenever I attempt this, the boxes end up overlapping or ...

htmlcsscss-position

Having trouble with CSS styling not applying to the header tag

Take a look at this snippet of HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link href="css/test.css" rel="stylesheet"> </head> <p></p> <h2>Meeting the Old Guard ...

htmlcss

Activate the horizontal scrollbar within each flex item when it is stretched beyond its original width

My goal is to have both the child-1 (blue) and child-2 (black) retain their original width when the sidebar appears by enabling horizontal scrolling upon clicking anywhere in the demo below. document.body.onclick = () => document.querySelector(&apos ...

htmlcssflexbox

Is it possible to use jQuery to dynamically set the line-height of nested objects in CSS?

I am in the process of creating a horizontal family tree. Where I'm At - I am currently working on setting the CSS Line-Height to vertically center each item based on nested content. The Issue - The Line-Height value for nested items keeps growing e ...

jqueryinheritancenestedcss

What are some recommended techniques for retrieving data following a post request in a Node.js environment?

I have a form in Node where I can input user information. After submitting the form, a post request is triggered to add the user to the database. How can I efficiently fetch the data to display a new list of users on the user list? Should I include a get ...

reactjsexpressnext.js

Swap out the HTML button element for text once the form is submitted

On the main page, I have a button that opens a modal when clicked. Inside the modal, there is a form with a submit button that closes the modal and returns to the main page. After closing the modal, I want to change the HTML button on the main page to plai ...

javascripthtmlcssbuttonmodal-dialog

When attempting to extract values from selected items in Nextjs, clicking to handle them resulted in no action

I am facing an issue with my Nextjs project. I am trying to gather values from select items and combine them into a single object that needs to be processed by an API. However, when I click the select button, nothing happens. How can I resolve this issue? ...

javascriptreactjsmongodbnext.js

"Turn off" server-side rendering in Next.js

I am looking to develop a Browser-Application using React and MUI without SSR. I came across a NextJS template that seems promising: https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript My goal is to completely disable SSR, idea ...

next.jsserver-side-rendering

Adding an active class to a large image when a thumbnail image is clicked can enhance user experience and

I've created a photo gallery using jquery. Currently, when I click on "next", the image changes based on the index. However, I also want to be able to click on the thumbnails (small images) and display the larger image according to that specific inde ...

javascriptjqueryhtmlcssslider

Incorporate user input into Alert Dialog Boxes

Would you be able to assist me in displaying the input value from the "email" field in my alert box? The code seems to be working fine, but I'm having trouble getting the alert box to show the email form value. I decided to use Bootstrap for som ...

javascripthtmlcss

The prop type validation has failed: The prop `children` provided to `ForwardRef(Container)` is invalid. A ReactNode was expected

I've been racking my brain trying to figure out why I keep getting this warning. Even after commenting out all the code in both the page and component, the warning persists. It must be something simple that I'm just completely overlooking. Hopefu ...

reactjsnext.jsmaterial-uiprisma

I cannot seem to alter the background color of my image through the use of external CSS

body { background-color: #f6f7d4; } h1, h3, hr { color: #68b8ab; } hr { width: 100px; border-style: dotted none none; border-color: gray; border-width: 5px; } img { background-color: black; } Although the external CSS code a ...

htmlcss

There appears to be some lingering content in the JQuery Mobile slide-out dialog box

My jQuery mobile slide out dialog box is experiencing an issue. The first time the slide out occurs, a comment box appears where users can enter comments and then submit them, followed by a "THANK YOU" message. However, when the user closes the dialog box ...

javascriptjqueryhtmlcssjquery-mobile

The issue of experiencing an infinite loop when updating state on the Next.js router query change

Allow me to provide some background: I'm currently working on updating data on the server using React Query's useMutation (It's somewhat similar to setting a local state). However, the mutation I want to perform should depend on whether a ...

reactjsreact-hooksnext.js

Minimize the entire project by compressing the .css, .js, and .html files

After recently incorporating Grunt into my workflow, I was thrilled with how it streamlined the process of minifying/concatenating .css files and minifying/uglify/concatenating .js files. With Grunt watch and express, I was able to automate compiling and ...

javascripthtmlcssobfuscation

Changing the Position of HTML Scripts in React

I am facing an issue where I need to relocate an external script within a specific section of my page. However, I am unable to access the CSS attributes associated with this item. It seems that it is displayed as an iFrame, making it difficult to modify th ...

javascripthtmlcssreactjs

My HTML Won't Recognize the CSS File

Despite trying various paths and browsers, I am unable to link my CSS file to my HTML file. When inspecting the page elements and checking under resources, the CSS file does not appear. Here is a snippet of my HTML: <html> <head> <meta ...

htmlcss