Styling Rock, Paper, Scissor project

Language Help React.js
1

Intermediate REACT

Styling Rock, Paper, Scissor Project

Has anyone else had problems with this project? I have gone through it twice, reseting and starting fresh. From my perspective nothing is applying when I run the code. I’m not sure what I’m missing.

I’ve imported styles this way:
import styles from ‘./styles/Game.module.css’
&
this way:
‘./Game.module.css’

…neither seem to be working.

code:

Thanks in Advance.
Chris

1 Like
2

Have you found the solution to this? I’m having the same problem

3

No, haven’t found the solution yet. I’ll keep working on it. Will post it if I when i do. Nothing seems to be rendering. Any thoughts?

1 Like
4

If nothing is rendering, inspect the tab, what is the error message thrown?

5

I am having the same problem too. :confused:
I did notice that the formatting option on the Game.module.css module is showing there is a syntax error, though.

1 Like
6

Having the same issue

7

There’s no “styles” folder, so all you need to do to import styles is the following line:

import styles from “./Game.module.css”;

I hope that helps!

8

@methodjumper47379 Hi!

Even with changing the import to…

import styles from “./Game.module.css”;

the styling is still not rendering.

1 Like
9

I honestly don’t know why that is. Once I did that and made sure to use “className” instead of “style” for each of the divs we were applying the styles to it worked.

I wish I could be more helpful, but I’m at a loss.

3 Likes
11

Hi.

I went through your code and it Is almost the same as mine. The styling renders for me.

The only difference I could spot is that you on line 77 applied the style choiceStyles and I emojiStyles. But that should not affect the overall rendering

1 Like
12

In Game.js, in the four objects choiceStyles, emojiStyles, nameStyles and resultStyle, why do you have semi-colons after the last property? It should either be a comma or nothing.

For example:

const emojiStyles = {
  fontSize: 64,
  marginRight: 20;   // Not correct
};

const emojiStyles = {
  fontSize: 64,
  marginRight: 20,     // Use a comma
};

const emojiStyles = {
  fontSize: 64,
  marginRight: 20   // or nothing
};
2 Likes
13

This is the error it throws for me.

Refused to apply style from ‘https://b0ba6d3a9bea4300b1af99c9ea0df1ec.cc-propeller.cloud/not.css’ because its MIME type (‘text/plain’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

From what I can find, it’s a server issue, not sending CSS files with the right MIME type. I’ve sent in a bug report, hopefully this can be fixed.

2 Likes
14

Ok, I was having this issue and I changed the import statement to: import styles from ‘./Game.module.css’ and on the div I used the word className instead of style and it finally worked.

2 Likes
15

Thank you! It now works.

Chris

1 Like
16

Thank you continuing to look into this. I appreciate it.

Chris

1 Like
17

The written message isn’t appearing on the screen. If anyone could trace where things are going wrong.?

18

Hi There,

The only change that worked is the first step of changing the title. I’ve done everything exactly as the video run through and none of the other inline styling has worked.

I’ve inspected the elements and the in line styles are not there but they are there in the project workspace.

Did you ever get a response to that bug you raised. tbh im not sure what the issue is.

2 Likes
19

I am experiencing the same issue too.

2 Likes
20

Still having the issue. Doesn’t render anything from the CSS module file.

1 Like
21

Did you find out what was causing the issue?