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
56 lines
1.3 KiB
Markdown
56 lines
1.3 KiB
Markdown
---
|
|
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**.
|
|
|
|
```jsx
|
|
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.<br>
|
|
|
|
Second, let's set the color to red.
|
|
|
|
```jsx
|
|
class Colorful extends React.Component {
|
|
render() {
|
|
return (
|
|
<div style={{ color: 'red' }}>
|
|
Big Red
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
```
|
|
|
|
Finally, let's set the font size to 72px.
|
|
|
|
### Spoiler
|
|
```jsx
|
|
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.
|