如何使用 Ant Design PageHeader 将项目对齐到中心？答案

【问题标题】：How to align item to center using Ant Design PageHeader?如何使用 Ant Design PageHeader 将项目对齐到中心？
【发布时间】：2019-10-20 05:01:51
【问题描述】：

我一直在尝试使用 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;

但是，如果我通过检查元素编辑子元素，它可以工作。

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

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

如何使用style 属性定位子元素？

【问题讨论】：

标签： css reactjs antd

【解决方案1】：

如何使用style 属性定位子元素？

不能，请参考Style Prop。

因此，您需要将 CSS-selector 定位为正常或使用 CSS-in-JS。

检查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')
);

【讨论】：