Skip to content

Styling component-specific themesΒ #58

@adrianmcli

Description

@adrianmcli

So I've got a ThemeProvider component that works as expected, but what if I want a specific theme for a specific component? Something like this:

import React from "react";

import ThemeProvider from "react-toolbox/lib/ThemeProvider";
import Button from "react-toolbox/lib/button/Button";

import theme from "../static/theme";
import btnTheme from "./btnTheme";

export default () => (
    <ThemeProvider theme={theme}>
      <Button theme={btnTheme} raised primary>Hello</Button>
    </ThemeProvider>
);

Basically, I want btnTheme to work as expected (i.e. as if I have CSS Modules enabled).

I'm using Next.js (not reflected above) so it is hard to have CSS modules, but I want to be able to have full control of individual components.

I just want to know if this is possible, or maybe it's just a feature that is incompatible with Next.js.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions