以下是 HTML 中内联样式的示例:
Mellow Yellow
JSX 元素使用style属性,但是由于 JSX 的传输方式,你不能将值设置为字符串。相反,你应将其设置为 JavaScript对象。这里有一个例子:
注意我们使用驼峰式命名的 “fontSize” 属性,这是因为 React 不会接受样式对象中的连字符。React 将在 HTML 中为我们应用正确的属性名称。
案例:
class Colorful extends React.Component {
render() {
return (
<div style={{color: "red", fontSize: '72px'}}>Big Red</div>
);
}
};
案例2:在 React 中添加内联样式
对于 JavaScript 对象属性来说,像font-size这样的连字符命名是无效的语法,所以 React
使用驼峰式命名。通常,任何连字符的 style 属性在 JSX 中都是使用驼峰式命名的。除非另有规定,否则所有属性值是长度的(如height、width和fontSize)其单位都假定为px。例如,如果要使用em,可以用引号将值和单位括起来,例如{fontSize:
“4em”}。除了默认为px的长度值之外,所有其他属性值都应该用引号括起来。如果你有大量样式,你可以将 style对象分配给一个常量,以保持代码的组织有序。取消对styles常量的注释,并声明具有三个样式属性及对应值的对象。使div的文字颜色为"purple"、字号为40、边框为"2px solid purple"。然后设置style属性,使其等于styles常量。
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
}
};