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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions