4.0 KiB
4.0 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036182 | Add Inline Styles in React | 6 | false | 在React中添加内联样式 |
Description
style
属性之外,还有HTML内联样式的其他几种语法差异。首先,某些CSS样式属性的名称使用驼峰大小写。例如,最后一个挑战使用fontSize
而不是font-size
设置font-size
。像font-size
这样的连字符是JavaScript对象属性的无效语法,因此React使用驼峰大小写。通常,任何带连字符的样式属性都是使用JSX中的camel case编写的。除非另有说明,否则假定所有属性值长度单位(如height
, width
和fontSize
)均为px
。例如,如果要使用em
,则将值和单位用引号括起来,如{fontSize: "4em"}
。除了默认为px
的长度值之外,所有其他属性值都应该用引号括起来。 Instructions
object
分配给常量以保持代码的有序性。取消注释styles
常量并声明具有三个样式属性及其值的object
。给div
一个颜色为"purple"
,字体大小为40
,边框为"2px solid purple"
。然后将style
属性设置为等于styles
常量。 Tests
tests:
- text: <code>styles</code>变量应该是具有三个属性的<code>object</code> 。
testString: 'assert(Object.keys(styles).length === 3, "The <code>styles</code> variable should be an <code>object</code> with three properties.");'
- text: <code>styles</code>变量的<code>color</code>属性应设置为<code>purple</code>的值。
testString: 'assert(styles.color === "purple", "The <code>styles</code> variable should have a <code>color</code> property set to a value of <code>purple</code>.");'
- text: <code>styles</code>变量应该将<code>fontSize</code>属性设置为值<code>40</code> 。
testString: 'assert(styles.fontSize === 40, "The <code>styles</code> variable should have a <code>fontSize</code> property set to a value of <code>40</code>.");'
- text: <code>styles</code>变量应该将<code>border</code>属性设置为<code>2px solid purple</code>的值。
testString: 'assert(styles.border === "2px solid purple", "The <code>styles</code> variable should have a <code>border</code> property set to a value of <code>2px solid purple</code>.");'
- text: 该组件应呈现<code>div</code>元素。
testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === "div"; })(), "The component should render a <code>div</code> element.");'
- text: <code>div</code>元素的样式应该由<code>styles</code>对象定义。
testString: '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"); })(), "The <code>div</code> element should have its styles defined by the <code>styles</code> object.");'
Challenge Seed
// const styles =
// 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
}
};
After Test
console.info('after the test');
Solution
// solution required