freeCodeCamp/curriculum/challenges/chinese/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
  }
};