This community-built FAQ covers the “Make A Style Object Variable” exercise from the lesson "Style ".
Paths and Courses
This exercise can be found in the following Codecademy content:
Web Development
Learn ReactJS: Part II
FAQs on the exercise Make A Style Object Variable
There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (
) below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
Agree with a comment or answer? Like (
) to up-vote the contribution!
Need broader help or resources? Head here.
Looking for motivation to keep learning? Join our wider discussions.
Learn more about how to use this guide.
Found a bug? Report it!
Have a question about your account or billing? Reach out to our customer support team!
None of the above? Find out where to ask other questions here!
If you export a React file with a global style variable to another React file that also has a global style variable, would that create conflict between the two files or no?
2 Likes
Great question!
I understand in that case you could use this type of import:
import * as myModule from '/modules/my-module.js';
or also
import { export1 as alias1 } from "module-name";
In this way, you change the name to avoid any collision.
Reference and further reading about it
1 Like
the tutorial mentions that:
Defining a variable named style in the top-level scope would be an extremely bad idea in many JavaScript environments! In React, however, it’s totally fine.
why is it an extremely bad idea?
I’m also very interested in hearing from someone who knows what could go wrong here. My guess was that this had something to do with the fact that document elements have a property called style and this could cause some confusion in the code? Or perhaps that html has style tags? However, the style element would still work even if we had a global variable named style, and using tags in html would be unaffected as well as a style attribute in html. Reading further, I think the main concern is that importing multiple js files may lead to a situation whereby one is importing multiple variables all with the same name which could get confusing. From the lesson:
Remember that every file is invisible to every other file, except for what you choose to expose via module.exports . You could have 100 different files, all with global variables named style , and there could be no conflicts.
Example use of a style property (but should not cause program issues even with a global variable named “style”.
const note = document.querySelector('.note');
note.style.backgroundColor = 'yellow';
note.style.color = 'red';
I don’t know if I’m the only one who noticed that this exercise is a little bit broken. In my case, in styleMe.js was already a styles variable defined which also was already referenced from the React tag. Thus, the instructions are a little bit inconsistent regarding creating a new styles object which already exists.
