freeCodeCamp/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/introducing-inline-styles.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036181	介紹內聯樣式	6	301395	introducing-inline-styles

--description--

還有其他複雜的概念可以爲 React 代碼增加強大的功能。 但是，你可能會想知道更簡單的問題，比如：如何對在 React 中創建的 JSX 元素添加樣式。 你可能知道，由於將 class 應用於 JSX 元素的方式與 HTML 中的使用並不完全相同。

如果從樣式表導入樣式，它就沒有太大的不同。 使用 className 屬性將 class 應用於 JSX 元素，並將樣式應用於樣式表中的 class。 另一種選擇是使用內聯樣式，這在 ReactJS 開發中非常常見。

將內聯樣式應用於 JSX 元素，類似於在 HTML 中的操作方式，但有一些 JSX 差異。 以下是 HTML 中內聯樣式的示例：

<div style="color: yellow; font-size: 16px">Mellow Yellow</div>

JSX 元素使用 style 屬性，但是鑑於 JSX 的編譯方式，不能將值設置爲 string（字符串）。 相反，你應該將其設置爲等於JavaScript object 。 如下所示：

<div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>

注意到如何駝峯拼寫 fontSize 屬性了嗎？ 這是因爲 React 不接受樣式對象中的 kebab-case 鍵。 React 將在 HTML 中爲應用正確的屬性名稱。

--instructions--

在代碼編輯器中給 div 添加一個 style 屬性，將文本顏色設置爲紅色，字體大小設置爲 72px。

請注意，可以選擇將字體大小設置爲數字，省略單位 px，或者將其寫爲 72px。

--hints--

組件應該渲染一個 div 元素。

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(Colorful));
    return mockedComponent.children().type() === 'div';
  })()
);

div 元素的顏色應該是 red（紅色）。

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(Colorful));
    return mockedComponent.children().props().style.color === 'red';
  })()
);

div 元素的字體大小應爲 72px。

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(Colorful));
    return (
      mockedComponent.children().props().style.fontSize === 72 ||
      mockedComponent.children().props().style.fontSize === '72' ||
      mockedComponent.children().props().style.fontSize === '72px'
    );
  })()
);

--seed--

--after-user-code--

ReactDOM.render(<Colorful />, document.getElementById('root'))

--seed-contents--

class Colorful extends React.Component {
  render() {
    return (
      <div>Big Red</div>
    );
  }
};

--solutions--

class Colorful extends React.Component {
  render() {
    return (
      <div style={{color: "red", fontSize: 72}}>Big Red</div>
    );
  }
};