将样式应用于antd表列

Ant Design（简称Antd）是一个流行的React UI库，提供了丰富的组件来帮助开发者快速构建用户界面。在Antd中，表格组件（Table）是一个非常常用的组件，用于展示结构化的数据。将样式应用于Antd表列可以通过多种方式实现，以下是一些基础概念和相关方法：

基础概念

CSS-in-JS：在组件内部直接编写CSS样式。
Styled Components：使用第三方库来创建带有样式的组件。
内联样式：直接在JSX元素上使用style属性。
外部CSS文件：通过类名在外部CSS文件中定义样式。

类型与应用场景

内联样式：适用于简单的样式调整，不需要复用的情况。
CSS-in-JS：适用于需要在组件内部动态改变样式的场景。
Styled Components：适用于需要创建可复用样式的复杂组件。
外部CSS文件：适用于全局样式或需要跨多个组件共享的样式。

示例代码

使用内联样式

import React from 'react';
import { Table } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    width: 150,
    render: (text) => <span style={{ color: 'blue', fontWeight: 'bold' }}>{text}</span>,
  },
  // 其他列...
];

const data = [
  { key: '1', name: 'John Brown' },
  // 其他数据...
];

const App = () => <Table columns={columns} dataSource={data} />;

export default App;

使用CSS-in-JS

import React from 'react';
import { Table } from 'antd';
import styled from 'styled-components';

const StyledName = styled.span`
  color: blue;
  font-weight: bold;
`;

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    width: 150,
    render: (text) => <StyledName>{text}</StyledName>,
  },
  // 其他列...
];

const data = [
  { key: '1', name: 'John Brown' },
  // 其他数据...
];

const App = () => <Table columns={columns} dataSource={data} />;

export default App;

使用外部CSS文件

// styles.css
.name-column {
  color: blue;
  font-weight: bold;
}

// App.js
import React from 'react';
import { Table } from 'antd';
import './styles.css';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    width: 150,
    className: 'name-column',
  },
  // 其他列...
];

const data = [
  { key: '1', name: 'John Brown' },
  // 其他数据...
];

const App = () => <Table columns={columns} dataSource={data} />;

export default App;