如何在正文或html上应用CSS时，保持特定于在Reactjs上构建的SPA中每个页面的css属性

在React.js上构建的单页面应用（SPA）中，可以通过以下几种方式来应用CSS属性：

1. 内联样式（Inline Styles）：在React组件的JSX代码中，可以直接使用内联样式来定义特定于每个页面的CSS属性。内联样式是一个JavaScript对象，其中包含CSS属性和对应的值。例如：

const MyComponent = () => {
  const pageStyles = {
    backgroundColor: 'blue',
    color: 'white',
    fontSize: '16px',
  };

  return (
    <div style={pageStyles}>
      This is a page in the React SPA.
    </div>
  );
};

在上述示例中，pageStyles对象定义了特定于该页面的CSS属性，然后通过style属性将其应用到<div>元素上。

1. CSS模块化（CSS Modules）：使用CSS模块化可以将CSS样式与React组件关联起来，以确保每个页面的样式不会相互干扰。在React项目中，可以使用Webpack等构建工具来支持CSS模块化。首先，在CSS文件中定义样式：

/* styles.css */
.page {
  background-color: blue;
  color: white;
  font-size: 16px;
}

然后，在React组件中导入CSS模块，并将样式应用到相应的元素上：

import styles from './styles.css';

const MyComponent = () => {
  return (
    <div className={styles.page}>
      This is a page in the React SPA.
    </div>
  );
};

在上述示例中，通过import styles from './styles.css'导入了CSS模块，并使用className={styles.page}将样式应用到<div>元素上。

1. CSS-in-JS库：除了内联样式和CSS模块化，还可以使用CSS-in-JS库来应用特定于每个页面的CSS属性。CSS-in-JS库允许在JavaScript代码中编写CSS样式，并将其动态地应用到React组件中。常见的CSS-in-JS库包括Styled Components、Emotion等。以下是使用Styled Components的示例：

import styled from 'styled-components';

const PageContainer = styled.div`
  background-color: blue;
  color: white;
  font-size: 16px;
`;

const MyComponent = () => {
  return (
    <PageContainer>
      This is a page in the React SPA.
    </PageContainer>
  );
};

在上述示例中，通过styled.div创建了一个名为PageContainer的组件，并在模板字符串中定义了特定于该页面的CSS属性。

总结起来，保持特定于在React.js上构建的SPA中每个页面的CSS属性的方法包括内联样式、CSS模块化和CSS-in-JS库。具体选择哪种方式取决于项目需求和个人偏好。腾讯云提供的相关产品和产品介绍链接地址可以参考腾讯云官方文档或咨询腾讯云的客服人员。