Round header font family property doesn't work

[hichemfantar]

The font family property on the root object works but the one on the round header doesn't apply.

const GlootTheme = createTheme({
    textColor: { main: "#000000", highlighted: "#F4F2FE", dark: "#707582" },
    matchBackground: { wonColor: "#2D2D59", lostColor: "#1B1D2D" },
    score: {
        background: {
            wonColor: `#10131C`,
            lostColor: "#10131C",
        },
        text: { highlightedWonColor: "#7465da", highlightedLostColor: "#FB7E94" },
    },
    border: {
        color: "#292B43",
        highlightedColor: "RGBA(152,82,242,0.4)",
    },
    roundHeader: {
        backgroundColor: "#3B3F73",
        fontColor: "#F4F2FE",
        // fontFamily: "inherit",
        fontFamily: "Poppins, sans-serif",
    },
    connectorColor: "#3B3F73",
    connectorColorHighlight: "RGBA(152,82,242,0.4)",
    svgBackground: "#0F121C",
    background: "rgb(11, 13, 19)",
    // fontFamily: "inherit",
    fontFamily: "Poppins, sans-serif",
});

[Shenato]

Hey thank you for opening this ticket, I've found the issue and this should be fixed now in aad61a74e82a6d02aca792924a63d0f9056e2e83

Let me know if it isn't and I will reopen the ticket 👍

[hichemfantar]

@Shenato Hello, thanks for the effort but it still isn't working for some reason.

This is the round header element and the styles being applied to it.

<text x="525" y="45" fill="currentColor" dominant-baseline="middle" text-anchor="middle" style="font-family: Roboto, Arial, Helvetica, &quot;sans-serif&quot;; font-size: 16px; color: white;">Round Quarterfinals</text>

    font-family: Roboto, Arial, Helvetica, "sans-serif";
    font-size: 16px;
    color: white;

[Shenato]

To style roundHeaders you have to use the style property on the bracket component similar to this example

This code snippet shows how to do it through the style prop

[hichemfantar]

Thanks, it works now. Is it possible to also make it customizable through the theme prop? It's currently possible to change the bracket item font family but not the round header font family.

[Shenato]

Hey @hichemfantar!

Is it possible to also make it customizable through the theme prop?

That should be possible in the latest release now https://github.com/g-loot/react-tournament-brackets/releases/tag/v1.0.30

Enjoy! Let me know if it works as intended for you. 🌞