有没有一种方法可以自定义渲染文本Fluent UI Command Bar？我想要按钮标签和“计数”，但“计数”的字体较小

问题描述

我正在使用Fluent UI CommandBar based on the ResizeGroup example。

对于按钮标签，我希望我的标签文本具有常规字体大小，然后将“ Count”属性传递给它，并以不同的样式跨度呈现。...

在这种情况下，我想使“计数”部分变小，并且字体颜色可能会有所不同。

这是我今天所拥有的屏幕截图...基本上，我将计数直接添加到按钮的文本中，以便可以看到数字。您会看到数字占据了很多空间，并且使效果有些混乱。

Screenshot of my current CommandBar

我已经在使用 commandBarButtonAs 属性，如下所示。 generateData 是从Fluent UI示例代码复制而来的，但已修改以构建我的项目。

  export const customButtonWithIcon = (props: IButtonProps) => {

    return (
      <CommandBarButton
        {...props}
        styles={{
          ...props.styles,root: {backgroundColor: 'white',padding:'10px 20px 10px 10px !important',height: 32,borderColor: 'white',width: 200,margin: '0px !important'},textContainer: { fontSize: 16,color: '#00457E' },icon: { 
            fontSize: 18,fontWeight: "bolder",margin: '0px 2px',},}}
      />
    );
  };



function generateData(items: ICMDItem[],checkedItem: string,cachingEnabled: boolean,showCatCounts: boolean,onClick: any): IOverflowData {
  const dataItems = [];
  let cacheKey = '';
  if ( items ) {
    for (let index = 0; index < items.length; index++) {
      let countLabel = showCatCounts ? ' (' + items[index].count + ')' : '';

      let ariaLabel = items[index].name + countLabel;
      items[index].data = items[index].count;
      const item = {
        key: items[index].key,name: items[index].name + countLabel,icon: items[index].icon ? items[index].icon : null,checked: items[index].name === checkedItem ? true : false,disabled: items[index].disabled,ariaLabel: items[index].name + countLabel,commandBarButtonAs: items[index].icon ? customButtonWithIcon : customButtonNoIcon,onClick: onClick,count: items[index].count,data:  items[index].count,};
      item.ariaLabel = ariaLabel;
      cacheKey = cacheKey + item.key;
      dataItems.push(item);
    }
  } else {
    console.log('Opps!  For some reason \'items\' were empty in generateData on commandBar.tsx...\n ref checkedItem = ' + checkedItem );
  }

  let result: IOverflowData = {
    primary: dataItems,overflow: [] as any[]
  };

  if (cachingEnabled) {
    result = { ...result,cacheKey };
  }

  return result;
}

谢谢您的建议！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）