管理员中带有图像的自定义标题休息

Question

我正在使用 admin-on-rest 构建我们的下一个仪表板。我希望能够在标题前面的 header 中添加一个 logo/image。这是否涉及自定义主题，或者是否有侵入性较小的方法？

Answer 1

我找到了这个问题的答案，我想我会在 Whosebug 上分享给下一个面临这个问题的开发者。

<Admin /> 上的 title 属性接受一个节点。所以这有效：

import {Admin} from 'admin-on-rest';

const App = () => (
  <Admin title={<AppTitle />}>
    // Resources
  </Admin>
);

// Default styles
const appTitleStyles = {
  whiteSpace        : 'nowrap',
  overflow          : 'hidden',
  WebkitTextOverflow: 'ellipsis',
  textOverflow      : 'ellipsis',
  margin            : 0,
  letterSpacing     : 0,
  fontSize          : 24,
  fontWeight        : '400',
  color             : 'rgb(255, 255, 255)',
  height            : 44,
  paddingTop        : 10,
  paddingBottom     : 10,
  WebkitFlex        : '1 1 0%',
  MsFlex            : '1 1 0%',
  flex              : '1 1 0%'
};

const AppTitle = () => (
  <img style={appTitleStyles} src="./my-cool-logo.png" />
);

export default App;

管理员中带有图像的自定义标题休息

Custom title with image in admin on rest

reactjs

admin-on-rest