react样式如何设定

内联样式

在React中可以直接使用内联样式，通过style属性传递一个对象。对象中的属性采用驼峰命名法，例如backgroundColor而非background-color。

const divStyle = {
  color: 'blue',
  backgroundColor: 'lightgray'
};

function MyComponent() {
  return <div style={divStyle}>Hello World</div>;
}

CSS样式表

引入外部CSS文件是最常见的方式。创建一个.css文件并在组件中导入。

/* styles.css */
.my-class {
  color: red;
  font-size: 16px;
}

import './styles.css';

function MyComponent() {
  return <div className="my-class">Hello World</div>;
}

CSS Modules

CSS Modules可以避免全局样式冲突，生成唯一的类名。文件名需以.module.css结尾。

/* styles.module.css */
.myClass {
  color: green;
}

import styles from './styles.module.css';

function MyComponent() {
  return <div className={styles.myClass}>Hello World</div>;
}

Styled-components

使用styled-components库可以编写组件级CSS，支持动态样式。

import styled from 'styled-components';

const StyledDiv = styled.div`
  color: purple;
  font-size: 20px;
`;

function MyComponent() {
  return <StyledDiv>Hello World</StyledDiv>;
}

动态样式

根据条件动态调整样式，可以通过内联样式或模板字符串实现。

function MyComponent({ isActive }) {
  const dynamicStyle = {
    color: isActive ? 'green' : 'red'
  };

  return <div style={dynamicStyle}>Dynamic Content</div>;
}

全局样式

通过createGlobalStyle（styled-components）或直接在index.css中定义全局样式。

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    font-family: Arial;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <OtherComponents />
    </>
  );
}

第三方UI库

如Material-UI、Ant Design等提供了预设样式组件，可直接使用其主题和样式系统。

import { Button } from '@mui/material';

function MyComponent() {
  return <Button variant="contained">Click Me</Button>;
}