在react组件上内联“普通”css和自定义css属性

在React组件上内联普通CSS和自定义CSS属性可以通过使用内联样式（Inline Style）来实现。内联样式是直接在组件的JSX中定义样式对象，然后将样式对象作为组件元素的style属性值进行传递。

普通CSS：普通CSS是指常规的CSS样式规则，可以在内联样式中直接使用。在内联样式中，可以使用CSS的属性和值，如颜色、字体大小、背景颜色等。以下是一个示例：

import React from 'react';

const MyComponent = () => {
  const styles = {
    color: 'red',
    fontSize: '20px',
    backgroundColor: 'yellow'
  };

  return (
    <div style={styles}>
      This is a React component with inline styles.
    </div>
  );
};

export default MyComponent;

在上面的例子中，定义了一个样式对象styles，其中包含了颜色、字体大小和背景颜色的属性及其对应的值。然后，将该样式对象作为div元素的style属性值进行传递，实现了内联的普通CSS样式。

自定义CSS属性：自定义CSS属性可以使用CSS的var()函数和--前缀进行定义和引用。在React中，可以在样式对象中使用自定义CSS属性，并在组件的JSX中引用这些属性。以下是一个示例：

import React from 'react';

const MyComponent = () => {
  const styles = {
    '--custom-color': 'blue',
    '--custom-size': '30px'
  };

  return (
    <div style={styles}>
      <p style={{ color: 'var(--custom-color)', fontSize: 'var(--custom-size)' }}>
        This is a React component with custom CSS properties.
      </p>
    </div>
  );
};

export default MyComponent;

在上面的例子中，定义了两个自定义CSS属性--custom-color和--custom-size，并给它们分别赋予了蓝色和30像素的值。然后，在p元素的样式中，使用var()函数引用了这两个自定义属性，实现了自定义CSS属性的内联使用。

腾讯云相关产品和产品介绍链接地址：腾讯云提供了一系列云计算服务，包括云服务器、云数据库、云存储等。以下是一些相关产品和对应的介绍链接地址：