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

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036182	在 React 中添加內聯樣式	6	301378	add-inline-styles-in-react

--description--

在上一次挑戰中，你可能已經注意到，除了設置爲 JavaScript 對象的 style 屬性之外，與 HTML 內聯樣式相比，React 的內聯樣式還有其他幾個語法差異。 首先，某些 CSS 樣式屬性的名稱使用駝峯式命名。 例如，最後一個挑戰用 fontSize 而不是 font-size 來設置字體的大小。 對於 JavaScript 對象屬性來說，像 font-size 這樣的連字符命名是無效的語法，所以 React 使用駝峯式命名。 通常，任何連字符的 style 屬性在 JSX 中都是使用駝峯式命名的。

除非另有規定，否則所有屬性值的 length（如height、width 和 fontSize）其單位都假定爲 px。 例如，如果要使用 em，可以用引號將值和單位括起來，例如 {fontSize: "4em"}。 除了默認爲 px 的 length 值之外，所有其他屬性值都應該用引號括起來。

--instructions--

如果你有大量樣式，你可以將樣式 object（對象）分配給一個常量，以保持代碼的組織有序。 在文件頂部將你的樣式聲明爲全局變量。 定義一個 styles 常量，並將其聲明爲具有三個樣式屬性及對應值的 object（對象）。 使 div 的文字顏色爲 purple、字號爲 40、邊框爲 2px solid purple。 然後設置 style 屬性，使其等於 styles 常量。

--hints--

styles 變量應該是具有三個屬性的 object（對象）。

assert(Object.keys(styles).length === 3);

styles 變量的 color 屬性應該設置爲 purple。

assert(styles.color === 'purple');

styles 變量應該將 fontSize 屬性設置爲 40。

assert(styles.fontSize === 40);

styles 變量的 border 屬性應該設置爲 2px solid purple。

assert(styles.border === '2px solid purple');

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

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

div 元素的樣式應該由 styles 對象定義。

assert(
  (function () {
    const mockedComponent = Enzyme.shallow(React.createElement(Colorful));
    return (
      mockedComponent.props().style.color === 'purple' &&
      mockedComponent.props().style.fontSize === 40 &&
      mockedComponent.props().style.border === '2px solid purple'
    );
  })()
);

--seed--

--after-user-code--

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

--seed-contents--

// Change code above this line
class Colorful extends React.Component {
  render() {
    // Change code below this line
    return (
      <div style={{color: "yellow", fontSize: 24}}>Style Me!</div>
    );
    // Change code above this line
  }
};

--solutions--

const styles = {
  color: "purple",
  fontSize: 40,
  border: "2px solid purple"
};
// Change code above this line
class Colorful extends React.Component {
  render() {
    // Change code below this line
    return (
      <div style={styles}>Style Me!</div>
    );
    // Change code above this line
  }
};