The "backgoundColor" doesn't actually change the color for the SingleEliminationBracket round headers

[maudinski]

In the example given in the readme, the backgroundColor for the roundHeader does not actually change the background color. Here is the example provided, which does not work. The font color does change though.

import { SingleEliminationBracket, Match, SVGViewer, createTheme } from '@Shenato/react-tournament-brackets';

const WhiteTheme = createTheme({
  textColor: { main: '#000000', highlighted: '#07090D', dark: '#3E414D' },
  matchBackground: { wonColor: '#daebf9', lostColor: '#96c6da' },
  score: {
    background: { wonColor: '#87b2c4', lostColor: '#87b2c4' },
    text: { highlightedWonColor: '#7BF59D', highlightedLostColor: '#FB7E94' },
  },
  border: {
    color: '#CED1F2',
    highlightedColor: '#da96c6',
  },
  roundHeader: { backgroundColor: '#da96c6', fontColor: '#000' },
  connectorColor: '#CED1F2',
  connectorColorHighlight: '#da96c6',
  svgBackground: '#FAFAFA',
});

export const WhiteThemeBracket = () => {
  const [width, height] = useWindowSize();
  const finalWidth = Math.max(width - 50, 500);
  const finalHeight = Math.max(height - 100, 500);

  return (
    <SingleEliminationBracket
      matches={simpleSmallBracket}
      matchComponent={Match}
      theme={WhiteTheme}
      options={{
        style: {
          roundHeader: {
            backgroundColor: WhiteTheme.roundHeader.backgroundColor,
            fontColor: WhiteTheme.roundHeader.fontColor,
          },
          connectorColor: WhiteTheme.connectorColor,
          connectorColorHighlight: WhiteTheme.connectorColorHighlight,
        },
      }}
      svgWrapper={({ children, ...props }) => (
        <SvgViewer
          background={WhiteTheme.svgBackground}
          SVGBackground={WhiteTheme.svgBackground}
          width={finalWidth}
          height={finalHeight}
          {...props}
        >
          {children}
        </SvgViewer>
      )}
    />
  );
};

[Shenato]

You wrote roundHeader instead of roundHeaders

If you rename it should resolve!

Also if you use the createTheme and pass that into the bracket it should be enough, you do not need to also pass options for roundHeaders.backgroundColor You can keep it for all the other options however 👍

[Shenato]

However thanks for bringing this up because I noticed both the options prop and the theme prop seem to clash internally sometimes, I will make a ticket to resolve that.

[maierfabian]

You wrote roundHeader instead of roundHeaders

If you rename it should resolve!

Also if you use the createTheme and pass that into the bracket it should be enough, you do not need to also pass options for roundHeaders.backgroundColor You can keep it for all the other options however 👍

When I try it with roundHeaders I get a type error as it only knows roundHeader for some reason