4.4 KiB
4.4 KiB
id | title | challengeType | isRequired |
---|---|---|---|
5a24c314108439a4d4036182 | Add Inline Styles in React | 6 | false |
Description
style
attribute set to a JavaScript object. First, the names of certain CSS style properties use camel case. For example, the last challenge set the size of the font with fontSize
instead of font-size
. Hyphenated words like font-size
are invalid syntax for JavaScript object properties, so React uses camel case. As a rule, any hyphenated style properties are written using camel case in JSX.
All property value length units (like height
, width
, and fontSize
) are assumed to be in px
unless otherwise specified. If you want to use em
, for example, you wrap the value and the units in quotes, like {fontSize: "4em"}
. Other than the length values that default to px
, all other property values should be wrapped in quotes.
Instructions
object
to a constant to keep your code organized. Uncomment the styles
constant and declare an object
with three style properties and their values. Give the div
a color of "purple"
, a font-size of 40
, and a border of "2px solid purple"
. Then set the style
attribute equal to the styles
constant.
Tests
tests:
- text: The <code>styles</code> variable should be an <code>object</code> with three properties.
testString: assert(Object.keys(styles).length === 3, 'The <code>styles</code> variable should be an <code>object</code> with three properties.');
- text: The <code>styles</code> variable should have a <code>color</code> property set to a value of <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: The <code>styles</code> variable should have a <code>fontSize</code> property set to a value of <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: The <code>styles</code> variable should have a <code>border</code> property set to a value of <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: The component should render a <code>div</code> element.
testString: assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === 'div'; })(), 'The component should render a <code>div</code> element.');
- text: The <code>div</code> element should have its styles defined by the <code>styles</code> object.
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
ReactDOM.render(<Colorful />, document.getElementById('root'))
Solution
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
);
}
};