3.9 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036182	React にインラインスタイルを追加する	6	301378	add-inline-styles-in-react

--description--

前回のチャレンジで気づいたかもしれませんが、JavaScript オブジェクトに設定された style 属性に加えて、他にも HTML のインラインスタイルとの構文の違いがいくつかありました。まず、特定の CSS スタイルプロパティの名前にキャメルケースを使用しています。たとえば前回のチャレンジでは、フォントのサイズを設定するのに font-size ではなく fontSize を使用しました。 font-size のようなハイフンつなぎの単語は JavaScript オブジェクトのプロパティの構文としては無効であるため、React ではキャメルケースを使用しています。通常、JSX ではハイフンつなぎのスタイルプロパティはキャメルケースを使用して記述します。

プロパティ値 (height、width、fontSize など) の長さの単位はすべて、特に指定がない限り px とみなされます。たとえば em を使用する場合は、{fontSize: "4em"} のように値と単位を引用符で囲みます。デフォルトで px になる長さの値を除いて、それ以外の他のすべてのプロパティ値は引用符で囲む必要があります。

--instructions--

スタイルセットがたくさんある場合、スタイル object を定数に割り当てることでコードを整理することができます。ファイルの先頭で、styles 定数をグローバル変数として宣言してください。 styles 定数を初期化し、3 つのスタイルプロパティとそれらの値を持つ object を割り当ててください。 div の color を purple に、font-size を 40 に、border を 2px solid purple に設定してください。そして、style 属性を styles 定数と等しく設定してください。

--hints--

styles 変数を、3 つのプロパティを持つ 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
  }
};

3.9 KiB Raw Blame History