FAQs on the exercise Share Styles Across Multiple Components
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!
After step 3 of 6/6, when I import { styles }, the browser appears “Internal Error”. Since then, I just followed the instructions without the browser showing what I did. Hope this gets fixed.
The “Internal Error” in the browser panel happens on occasion. Save your work by clicking “Run”, and then refresh your browser. If you feel like this is happening far too often, check out this Troubleshooting Guide. There may be steps you can take to reduce your frustration. Happy coding!
For me, it looks like this project was left unfinished. And FacebookColorThief.js, facebookStyles.js is the evidence lol. Even though you replace import in Home.js with import { styles } from ‘./styles’; to import { facebookStyles } from ‘./facebookStyles’;
still doesn’t work because facebookStyles.js doesn’t have the same keys as in styles.js
What is the benefit of using styles like this versus css-files? css-files can also be imported and linked to, and it seems to adher more to the idea of keeping styles and script separate.
I’ve been wondering the same thing. According to the React documentation they suggest NOT using inline styles and instead use a standard CSS file for all of your styling.
Hey guys I have a problem and cannot solve the exercise. When I click “Run” the styles are not displayed. Then I looked into the console of my web browser and got the following errors:
Failed to load resource: the server responded with a status of 499 (Request has been forbidden by antivirus)
What can I do?
Edit: I have found what went wrong. My styles.js file looked like this:
[styles.js]
// Wrong
// The variables can of course only be accessed after their declaration
// Point 2 of the exercise should actually have recognised the error.
export const styles = {
fontFamily: fontFamily,
background: background,
fontSize: fontSize,
padding: padding,
color: color
};
const fontFamily = 'Comic Sans MS, Lucida Handwriting, cursive';
const background = 'pink url("https://codecademy-content.s3.amazonaws.com/programs/react/images/welcome-to-my-homepage.gif") fixed';
const fontSize = '4em';
const padding = '45px 0';
const color = 'green';
But of course it should look like this
const fontFamily = 'Comic Sans MS, Lucida Handwriting, cursive';
const background = 'pink url("https://codecademy-content.s3.amazonaws.com/programs/react/images/welcome-to-my-homepage.gif") fixed';
const fontSize = '4em';
const padding = '45px 0';
const color = 'green';
// Here we go
export const styles = {
fontFamily: fontFamily,
background: background,
fontSize: fontSize,
padding: padding,
color: color
};
You would need to add the above to the code in the styles.js file. But much simplier for this excercise would be to leave the values assigned to the object as they were. I tried this but unfortunately it gave me an error. I expected later steps to correct this, but they didnt and of course I could not complete the excercise.
) below.
) to up-vote the contribution!
