如何使用 Ant Design PageHeader 将项目居中对齐？

Question

我一直在尝试使用 Ant Design 框架将一堆按钮置于 NavBar 的中心。

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;

但是，如果我通过 inspect-element 编辑子元素，它会起作用。

.ant-page-header-heading {
    width: 100%;
    overflow: hidden;
    align-items: center;
    display: flex;
}

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

如何使用 style 道具定位子元素？

Answer 1

How can I target the child element using the style props?

不可以，参考Style Prop。

因此，您需要像往常一样或使用 CSS-in-JS 来定位 CSS-选择器。

检查Styling FAQ。

// 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')
);

如何使用 Ant Design PageHeader 将项目居中对齐？

How to align item to center using Ant Design PageHeader?

css

reactjs

antd