Styles in NEXT.js are not loading properly due to issues with the Module

I have been attempting to apply module.css to one of my components by following the instructions provided in this tutorial https://nextjs.org/learn/basics/assets-metadata-css/layout-component.

/*/components/Livestream/App.js*/

import styles from './App.module.css';
...
return (
<div className={styles.container}>
 <main>
    <div className='live-stream'>
...
export default App;

/*/components/Livestream/App.module.css*/

.container main {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
}

.container main .live-stream {
  background-color: #000615;
  display: flex;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

However, only the main tag is receiving the css styling and not the class live-stream:

javascriptcssreactjssassnext.js

Answer №1

Resolved in this manner :

<div class="App" style={styles.container}>
  <main>
    <div class="stream" style={styles.liveStream}>

 #CSS
.App main .stream {
 // add your styles here
 }

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 are the steps to adjust the size of the Facebook "like" button?

Is there a way to modify the size of the Facebook like button? I attempted to adjust the padding of <a class="connect_widget_like_button clearfix like_button_no_like"> using jQuery, but was unsuccessful. Any suggestions on how this can be achieved? ...

javascriptjqueryfacebook-like

What is the best way to access a component generated using the .map() function from a separate component?

My objective is to create a grid of toggle buttons that store their selected values in an array. This array will then be used to display another row of buttons based on the selections. Once a button in the new row is chosen, it should deselect the corresp ...

reactjsreact-hooksmaterial-uiuse-ref

Managing the clearing of a view component in React or Vue.js

In my project, I have a container component that handles all the business logic, ajax requests, and data management. This container component has child components to which it passes data and methods as props. For example, there is a "CommentForm" compone ...

javascriptreactjsvue.jsvue-component

Is it advisable to consolidate all of my JavaScript files into a single file?

Is it necessary for me to combine all my JavaScript files into one single file and then include that file in a folder? I currently have 10 separate JS files within a "javascript" folder - is this bad for the website, or is it okay? P.S. I am new to web de ...

javascripthtml

What is the reason for JSON.parse throwing errors on the same strings that eval does not?

Imagine having something like this: var a = '["\t"]' When you use: eval('var result = ' + a) Everything runs smoothly. However, if you try: var result = JSON.parse(a) You'll encounter an error: Unexpected token. The s ...

javascriptjsoneval

Tips for optimizing the page speed of your Pixi JS app by ensuring it runs efficiently after the page loads

On my website, I implemented a dynamic gradient animation with shape-changing blobs using pixi js. The animation functions flawlessly, but the issue arises when I run page speed tests - the test assumes that the page has not finished rendering because the ...

javascripthtmljquerycsspixi.js

Having issues with incorporating a component into another component in VueJS

Having spent approximately 30 hours on diving into VueJS, I am encountering some difficulties when it comes to using a component within another component. Seeking assistance from someone knowledgeable in this area to provide me with some clarification. Pr ...

javascriptvue.jsvuejs2

The OOP functionality in Three.JS seems to be malfunctioning, as certain elements are not being properly accessed and displayed

I've run into some issues while trying to implement OOP in my Three.js project. The original script displays three y-rotational planes, but it seems like some objects I've created aren't being called when I check the console. Can someone ple ...

javascriptoopthree.js

Custom configuration for loading static images using Webpack file loader

Hello, I have a folder named /images which has a sub-directory called /static containing various images. I am wondering how I can configure webpack to make these images from the images/static path publicly available at dist/images/image-name.png, while k ...

node.jsreactjswebpack

"Troubleshoot the issue of a Meteor (Node.js) service becoming unresponsive

Currently running a Meteor (Node.js) app in production that is experiencing unexplained hang-ups. Despite implementing various log statements, I have pinpointed the issue to a specific method where the server consistently freezes. Are there any tools beyo ...

javascriptfacebooknode.jsmeteor

A guide to building a dynamic form slider that showcases variable output fields with Javascript

I'm interested in creating a Slider Form that shows different output fields when sliding, using Javascript. Something like this: https://i.sstatic.net/3Isl4.png Could anyone provide suggestions on how to achieve this or share any links related to so ...

javascripthtmljquerycss

Integrating Django with ReactJS resulted in the following error: "Unable to fetch resource: the server returned a 404 (Not Found) status code."

I'm currently immersed in an e-commerce venture utilizing Django at the backend and ReactJS on the frontend. However, I've hit a roadblock while attempting to retrieve data from the ReactJS component to the Django backend. The dreaded error messa ...

reactjsapidjango-rest-frameworkerror-handlingaxios

Error: Unexpected token '<' found while using Next.js middleware, causing a SyntaxError

I have implemented a Next.js middleware that redirects to the login page if there is no available token from the Spotify API. This is how my middleware looks: import { getToken } from "next-auth/jwt"; import { NextResponse } from "next/serv ...

reactjsnext.jsmiddleware

The websocket server implemented in Node.js with the use of the "ws" library is exhibiting a peculiar behavior where it disconnects clients at random intervals,

My WebSocket server implementation is quite simple: const WebSocket = require('ws'); const wss = new WebSocket.Server( { server: server, path: "/ws" }); wss.on('connection', function connection(ws, req) { console.log("Connect ...

javascriptnode.jssocketsnetworkingwebsocket

Issue with deleting and updating users in a Koa application

My goal is to create a function that deletes a specific user based on their ID, but the issue I'm facing is that it ends up deleting all users in the list. When I send a GET request using Postman, it returns an empty array. What am I doing wrong? I do ...

javascriptreactjsjsonkoa

What is the best way to showcase my divs in a masonry layout using flexbox?

I am attempting to design display divs in a masonry style using flex/flexbox. The layout must consist of a maximum of 2 columns, with each div having the same width (thus dividing into 2 columns equally) while varying in height based on their content. Some ...

htmlcss

What is the best way to update properties in a child component using React hooks?

Looking to update the props using react hooks, I came across a method of passing setState function as props to the child component. MainContainer.tsx const MainContainer: React.FC = () => { const [count, setCount] = useState(0); return <Counter ...

reactjstypescriptreact-hooks

Having issues setting a property value on a Mongoose result in a Node.js application

Hello there, I am currently working with a MongoDB object retrieved via a findById method, and I need to convert the _id within this object from an ObjectID type to a string. I have developed the following function: student: async (parent, { _id }, ...

javascriptnode.jsmongoose

What is the best way to address caching fonts and files within CSS?

Utilizing the font icon for displaying icons may result in difficulty when adding new icons to the font due to caching issues. Clearing the cache is often necessary to refresh the display. How can I address this concern? ...

cssreactjssassscss-mixins

Challenges with dynamically adding rows using jQuery

I am trying to create a dynamic form that allows users to select a project and then populates tasks based on the selected project from a database query. The user can then enter hours for each task, which are updated based on the project id and task id comb ...

phpjavascriptjqueryhtmlmysql