Css 如何使用Ant Design PageHeader将项目与中心对齐？

我一直在尝试使用Ant设计框架将导航栏中的一组按钮居中放置

NavBar.tsx

const NavBar: React.FC<NavBarProps> = ({ title }) => {
  return (
    <PageHeader
      style={{
        display: flex,
        align-items: center, //Doesn't work.
        backgroundColor: "#F5F5F5"
      }}
      backIcon={
        <Icon theme="twoTone" style={{ fontSize: "32px" }} type="skin"></Icon>
      }
      onBack={() => null}
      title={
        <Title style={{ margin: "0px" }} level={1}>
          Athena.
        </Title>
      }
      extra={[
        <RegularButton size="large" icon="shopping-cart">
          Cart.
        </RegularButton>,
        <RegularButton size="large" icon="profile">
          Profile.
        </RegularButton>
      ]}
    />
  );
};

export default NavBar;

^按钮浮动到顶部，而不是中间对齐

如何使用

样式

道具以子元素为目标

如何使用

样式

道具以子元素为目标

你不能，请参阅

因此，您需要将CSS选择器定位为普通或JS中的CSS

检查一下

//index.css
.ant页头标题{
背景：淡绿色；
}
//index.js
从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“./index.css”；
从“antd”导入{PageHeader}；
从“样式化组件”导入样式化；
const HeaderColoredContent=已设置样式（页面标题）`
.ant页面标题内容{
背景色：淡紫色；
}
`;
//v将应用这两种样式。
ReactDOM.render(
.ant-page-header-heading {
    width: 100%;
    overflow: hidden;
    align-items: center;
    display: flex;
}

// index.css
.ant-page-header-heading {
  background: paleturquoise;
}

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { PageHeader } from 'antd';
import styled from 'styled-components';

const HeaderColoredContent = styled(PageHeader)`
  .ant-page-header-content {
    background-color: palevioletred;
  }
`;

// v Will apply both styles.
ReactDOM.render(
  <div>
    <HeaderColoredContent
      ...
    </HeaderColoredContent>
  </div>,
  document.getElementById('container')
);