react 设置内置内联样式

在React中设置内联样式有几种方式。以下是其中两种常用的方法：

1. 使用对象字面量定义样式：

import React from 'react';

const styles = {
  container: {
    backgroundColor: 'red',
    fontSize: '16px',
    padding: '10px',
  },
  text: {
    color: 'white',
    fontWeight: 'bold',
  },
};

const Component = () => {
  return (
    <div style={styles.container}>
      <span style={styles.text}>Hello, World!</span>
    </div>
  );
};

export default Component;

在上面的例子中，我们创建了一个名为styles的对象，其中包含两个样式对象container和text。然后，在JSX中通过将style属性设置为相应的样式对象来应用样式。

1. 使用模板字符串的方式：

import React from 'react';

const containerStyles = `
  background-color: red;
  font-size: 16px;
  padding: 10px;
`;

const textStyles = `
  color: white;
  font-weight: bold;
`;

const Component = () => {
  return (
    <div style={containerStyles}>
      <span style={textStyles}>Hello, World!</span>
    </div>
  );
};

export default Component;

在上面的例子中，我们使用模板字符串的方式来定义样式。然后，在JSX中将样式字符串直接赋值给style属性。

以上两种方式都可以用于设置内联样式，你可以根据个人的喜好和项目需求选择适合的方式。请记住，使用内联样式时，样式属性名需要以驼峰式命名（如fontSize），并且属性值需要使用字符串形式（如'16px'）表示。