0a1eeea424
* fix: replace sh with shell fix replace terminal with shell fix replace node with js fix replace output with shell fix replace cs with csharp fix replace c++ with cpp fix replace c# with csharp fix replace javasctipt with js fix replace syntax with js fix replace unix with shell fix replace linux with shell fix replace java 8 with java fix replace swift4 with swift fix replace react.js with jsx fix replace javascriot with js fix replace javacsript with js fix replace c++ - with cpp fix: corrected various typos fix: replace Algorithm with nothing fix: replace xaml with xml fix: replace solidity with nothing fix: replace c++ with cpp fix: replace txt with shell fix: replace code with json and css fix: replace console with shell
1.3 KiB
1.3 KiB
title
| title |
|---|
| Introducing Inline Styles |
Introducing Inline Styles
Solution
This one can be a little tricky because JSX is very similar to HTML but NOT the same.
Let's walkthrough the steps so that you understand the difference. First set your style tag to a JavaScript object.
class Colorful extends React.Component {
render() {
return (
<div style={{}}>
Big Red
</div>
);
}
};
Now you have your style tag set to an empty object. Notice how there are two sets of curly braces. This is an important difference between JSX and HTML.
Second, let's set the color to red.
class Colorful extends React.Component {
render() {
return (
<div style={{ color: 'red' }}>
Big Red
</div>
);
}
};
Finally, let's set the font size to 72px.
Spoiler
class Colorful extends React.Component {
render() {
return (
<div style={{ color: 'red', fontSize: '72'}}>
Big Red
</div>
);
}
};
Notice how the JSX attribute is camelCase. This is another important difference to remember about JSX. Additionally, you probably noticed that there is no unit. In JSX, when setting the fontSize attribute the unit is optional and will automatically be set to px if not set manually.