Files
freeCodeCamp/guide/chinese/certifications/front-end-libraries/react/introducing-inline-styles/index.md
Randell Dawson 0a1eeea424 fix(guide) Replace invalid prism code block names (#35961)
* 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
2019-05-15 19:08:19 +02:00

57 lines
1.3 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: Introducing Inline Styles
localeTitle: 介绍内联样式
---
## 介绍内联样式
## 解
这可能有点棘手因为JSX与HTML非常相似但**不一样** 。
让我们逐步了解这些步骤,以便您了解其中的差异。 首先将样式标记设置为**JavaScript对象** 。
```jsx
class Colorful extends React.Component {
render() {
return (
<div style={{}}>
Big Red
</div>
);
}
};
```
现在您将样式标记设置为空对象。请注意有两组花括号。这是JSX和HTML之间的重要区别。
其次,让我们将颜色设置为红色。
```jsx
class Colorful extends React.Component {
render() {
return (
<div style={{ color: 'red' }}>
Big Red
</div>
);
}
};
```
最后让我们将字体大小设置为72px。
### 扰流板
```jsx
class Colorful extends React.Component {
render() {
return (
<div style={{ color: 'red', fontSize: '72'}}>
Big Red
</div>
);
}
};
```
注意JSX属性是如何使用**camelCase的** 。这是记住JSX的另一个重要区别。 此外您可能注意到没有单位。在JSX中设置fontSize属性时 **单位是可选的** 如果不手动设置将自动设置为px。