Roact GUI not updating

Help and Feedback Scripting Support
,
#1

I’m trying to make a plugin with Roact and Rojo and i created a Theme Context. But when the Theme changes the Gui doesn’t change. The Render function of the Consumers does get called but the Gui doesn’t update.

Theme Context Module

-- src/components/studio/Theme.lua
local Roact = require(script.Parent.Parent.Parent.Modules.Roact)

local studio = settings().Studio

function getThemeColors(theme)
    theme = theme or studio.Theme
    local colors = {}
    for _, color in ipairs(Enum.StudioStyleGuideColor:GetEnumItems()) do
        for _, modifier in ipairs(Enum.StudioStyleGuideModifier:GetEnumItems()) do
            local modifierName = modifier.Name
            if modifierName == "Default" then
                modifierName = ""
            end
            colors[color.Name .. modifierName] = theme:GetColor(color, modifier)
        end
    end
    return colors
end

local Context = Roact.createContext()
local Provider = Roact.Component:extend("ThemeProvider")

function Provider:updateTheme()
    self:setState({
        theme = getThemeColors()
    })
end

function Provider:init()
    self:updateTheme()
end

function Provider:render()
    print(self.state.theme)
    return Roact.createElement(Context.Provider, {
        value = self.state.theme
    }, self.props[Roact.Children])
end

function Provider:didMount()
    self.connection = studio.ThemeChanged:Connect(function()
        self:updateTheme()
    end)
end

function Provider:willUnmount()
    self.connection:Disconnect()
end

return {
    Provider = Provider,
    Consumer = Context.Consumer
}

Themed Frame

local Roact = require(script.Parent.Parent.Parent.Modules.Roact)
local Theme = require(script.Parent.Theme)

return function(props)
    return Roact.createElement(Theme.Consumer, {
        render = function(theme)
            print(theme.MainBackground)
            props.BackgroundColor3 = theme.MainBackground
            return Roact.createElement("Frame", props)
        end
    })
end