3.3 KiB
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
}
};