React 初学 - react内联样式 - 个人笔记48

以下是 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
  }
};