Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Custom theme not applied #30

Open
dividgithub opened this issue Feb 23, 2017 · 11 comments
Open

Custom theme not applied #30

dividgithub opened this issue Feb 23, 2017 · 11 comments

Comments

@dividgithub
Copy link

I'm trying to apply a custom theme using react-toolbox-themr, but none of the changes I make are being applied to the components.. Here's my config:

App.js:

...
import Layout from 'react-toolbox/lib/layout/Layout';
import Button from 'react-toolbox/lib/button/Button';
...
import custom from '../assets/theme/theme.js';
import ThemeProvider from 'react-toolbox/lib/ThemeProvider';
...
<ThemeProvider theme={custom}>
  <Layout>
      <NavDrawer active={this.state.drawerActive}
          pinned={this.state.drawerPinned} permanentAt='xxxl'
          onOverlayClick={ this.toggleDrawerActive }>
      <Menu />
      </NavDrawer>
      <Panel bodyScroll={ true }>
          <AppBar leftIcon='menu' onLeftIconClick={ this.toggleDrawerActive } className={ styles.header }/>
          <div style={{ flex: 1, overflowY: 'auto', padding: '1.8rem' }} className={ styles.content }>
              { this.props.children }
              <Button>Hello</Button>
          </div>
      </Panel>
      <Sidebar pinned={ this.state.sidebarPinned } width={ 5 }>
          <div><IconButton icon='close' onClick={ this.toggleSidebar }/></div>
          <div style={{ flex: 1 }}>
              <p>Supplemental content goes here.</p>
          </div>
      </Sidebar>
  </Layout>
</ThemeProvider>

webpack.config.js

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        include: resolve(__dirname, 'src'),
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
              localIdentName: "[name]--[local]--[hash:base64:8]"
            }
          },
          "postcss-loader"
        ]
      }
    ]
  },
...

postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {
      root: __dirname,
    },
    'postcss-mixins': {},
    'postcss-each': {},
    'postcss-cssnext': {
      features: {
          customProperties: {
            variables: {
              'background-color': '#000' // for example
            },
          },
        }
    },
    'postcss-reporter': {
      clearMessages: true
    }
  },
};

package.json

"reactToolbox": {
    "include": [
      "BUTTON",
      "LAYOUT"
    ],
    "customProperties": {
      "color-primary": "var(--palette-pink-700)"
    },
    "output": "src/assets/theme"
  }

I'm running react-toolbox-themr and the assets are being generated, although no custom styles are included. Classes are also applied to the components as far as I can see, but again, components look the same no matter what I do.. The generated CSS file is included in my index' head, of course.

I'm pretty sure I'm missing something obvious here..

@mattzuba
Copy link

I believe your webpack config and postcss config are pointless here because react-toolbox-themr doesn't use them. Why aren't you adding the background-color variable to your customProperties of reactToolbox in package.json?

@dividgithub
Copy link
Author

Thanks for looking into this. Thing is, not even "color-primary": "var(--palette-pink-700)" is being used/evaluated by react-toolbox-themr ..

@icd2k3
Copy link

icd2k3 commented Feb 28, 2017

Same problem here, no matter what I try I can't seem to make the theme take effect:

import theme from 'rttheme';
import ThemeProvider from 'react-toolbox/lib/ThemeProvider';

const CoreLayout = () => (
  <ThemeProvider theme={theme}>
    <REACT_TOOLBOX_ELEMENTS />
  </ThemeProvider>
);

I can confirm that rttheme is a big javascript object of the elements I want themed:
elements

But they never take effect... here is my theme prefs:

{
  "include": [
    "AUTOCOMPLETE",
    "AVATAR",
    "BUTTON",
    "CARD",
    "CHECKBOX",
    "CHIP",
    "DATE_PICKER",
    "DIALOG",
    "DRAWER",
    "DROPDOWN",
    "INPUT",
    "LAYOUT",
    "LINK",
    "LIST",
    "MENU",
    "NAVIGATION",
    "OVERLAY",
    "PROGRESS_BAR",
    "RADIO",
    "RIPPLE",
    "SLIDER",
    "SNACKBAR",
    "SWITCH",
    "TABLE",
    "TABS",
    "TIME_PICKER",
    "TOOLTIP"
  ],
  "customProperties": {
   "animation-duration": "0.25s",
    "color-text": "var(--palette-red-50)",
    "color-background": "var(--palette-red-50)",
    "color-primary": "var(--palette-red-50)",
    "color-accent": "var(--palette-red-50)",
    "color-accent-dark": "var(--palette-red-50)",
    "color-primary-contrast": "var(--palette-red-50)",
    "color-accent-contrast": "var(---palette-red-50)"
  }
}

Note that I'm just setting everything to red to test if it works...

  • react-toolbox v 2.0.0-beta.6
  • react-toolbox-themr v 1.0.2

@icd2k3
Copy link

icd2k3 commented Feb 28, 2017

Edit: I've also tried importing raw RT components as outlined here

import Input from 'react-toolbox/lib/input/Input';
import Button from 'react-toolbox/lib/button/Button';

but then I end up with no styles at all!
no styles

@MarkGalloway
Copy link

MarkGalloway commented Mar 8, 2017

@icd2k3 You need to import the css file generated by themr to style your raw components
eg/ import '../../../assets/react-toolbox/theme.css';

@csalvato
Copy link

Having same issue here. Trying to change the typeface but running into issues. My files...

package.json

{
  "name": "movementa-ui",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": "6.10.0",
    "npm": "3.10.10"
  },
  "dependencies": {
    "flexboxgrid": "^6.3.1",
    "flexboxgrid-helpers": "^1.1.1",
    "history": "^3.0.0",
    "material-design-icons-iconfont": "^3.0.3",
    "postcss": "^5.2.15",
    "postcss-cssnext": "^2.9.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.3",
    "react-router": "^3.0.2",
    "react-toolbox": "^2.0.0-beta.6",
    "react-toolbox-themr": "^1.0.2",
    "redux": "^3.6.0",
    "roboto-fontface": "^0.7.0",
    "typeface-jura": "0.0.22"
  },
  "devDependencies": {
    "@kadira/storybook": "^2.21.0",
    "eslint": "^3.17.0",
    "postcss-loader": "^1.3.3",
    "react-scripts": "0.9.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "toolbox": "react-toolbox-themr",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "reactToolbox": {
		"include": [
			"AUTOCOMPLETE",
			"AVATAR",
			"BUTTON",
			"CARD",
			"CHECKBOX",
			"CHIP",
			"DATE_PICKER",
			"DIALOG",
			"DRAWER",
			"DROPDOWN",
			"INPUT",
			"LAYOUT",
			"LINK",
			"LIST",
			"MENU",
			"NAVIGATION",
			"OVERLAY",
			"PROGRESS_BAR",
			"RADIO",
			"RIPPLE",
			"SLIDER",
			"SNACKBAR",
			"SWITCH",
			"TABLE",
			"TABS",
			"TIME_PICKER",
			"TOOLTIP"
		],
    "customProperties": {
      "variables": {
        "preferred-font": "'Jura', sans-serif;"
      }
    },
		"output": "src/toolbox"
	}
}

Styles in Chrome
image

No matter what custom property I try to set, none of them take hold.

The default theme is being applied though, because the components are styled, but just not with the updated properties:

image

Using create-react-app, if that makes a difference.

Wondering what I can do to get this to work?

@darklilium
Copy link

Having the same issue. I just downloaded the lib and im having troubles on getting the custom theme on red-500 for all the components.

I have my package.json:

...
  "scripts": {
    "sturto": "node_modules/.bin/cross-env NODE_ENV=development node_modules/.bin/webpack-dev-server --colors --config webpack.config.js",
    "start": "start npm run dev:server & start npm run gulp",
    "dev:server": "webpack-dev-server --history-api-fallback",
    "build": "node_modules/.bin/cross-env NODE_ENV=production UV_THREADPOOL_SIZE=100 webpack --config webpack.config.js",
    "deploy": "gh-pages -d build",
    "gulp": "gulp",
    "prod:build": "webpack --optimize-minimize --progress --colors",
    "toolbox": "react-toolbox-themr"
  },
  "reactToolbox":{
    "include": [
      "BUTTON",
      "DATE_PICKER",
      "INPUT"
    ],
    "customProperties": {
      "color-primary": "var(--palette-red-500)",
      "color-primary-dark": "var(--palette-red-700)",
      "color-accent": "var(--palette-pink-a200)",
      "color-accent-dark": "var(--palette-pink-700)",
      "color-primary-contrast": "var(--color-dark-contrast)",
      "color-accent-contrast": "var(--color-dark-contrast)"
    },
    "output": "src/css/toolbox"
  },
...

My webpack config (using version 2):

const path = require('path');
const webpack = require('webpack');

const settings = {
  entry: {
    bundle: [
      "react-hot-loader/patch",
      "./src/index.js"
    ]
  },
  output: {
    filename: "[name].js",
    publicPath: "/",
    path: path.join(path.join(__dirname, 'dist'), 'js'),
    libraryTarget: "amd",
  },
  resolve: {
    //extensions: [".js", ".json", ".css"]
    extensions: ['.scss', '.css', '.js', '.json','.webpack.js', '.web.js', '.js', '.jsx']

  },
  //devtool: 'inline-source-map',
  devtool: 'source-map',
  module: {
    rules: [
      {
        //test: /\.js?$/,
         test: /(\.js|\.jsx)$/,
        loader: 'babel-loader',
        options: {
          presets: [
            ["es2015", { modules: false }],
            "stage-2", "stage-1",
            "react"
          ],
          plugins: [
            "transform-node-env-inline"
          ],
          env: {
            development: {
              plugins: ["react-hot-loader/babel"]
            }
          }
        }
      },
      {
      //  test: /\.css$/,
      test: /(\.scss|\.css)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
              localIdentName: "[name]--[local]--[hash:base64:8]"
            }
          },
          "postcss-loader" // has separate config, see postcss.config.js nearby
        ]
      }
    ]
  },
  externals: [
      function(context, request, callback) {
          if (/^dojo/.test(request) ||
              /^dojox/.test(request) ||
              /^dijit/.test(request) ||
              /^esri/.test(request)
          ) {
              return callback(null, "amd " + request);
          }
          callback();
      }
  ],
  devServer: {
  //  contentBase: path.resolve("src/www"),
  //  publicPath: "http://localhost:8080/", // full URL is necessary for Hot Module Replacement if additional path will be added.
  /*  quiet: false,
    hot: true,
    port: 443,
    host: "127.0.0.1",

    historyApiFallback: true,
    inline: true
    */

    inline: true,
    port: 443,
    host: "127.0.0.1",
    historyApiFallback: true

  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.LoaderOptionsPlugin({
      debug: true
    }),
  ],
};

module.exports = settings;

@danielmichaelni
Copy link

I had this problem as well, and I realized I forgot to link the generated css in my html file.

@KevinDanikowski
Copy link

@danielmichaelni I know this is a bit late, but do you mind showing your code? Not sure where exactly the import is supposed to come from. Thank you!

@mienaikoe
Copy link

mienaikoe commented Jan 2, 2019

To follow up with what @danielmichaelni said, it's important to note that react-toolbox-themr creates two files, a css file and a js file. The js file is used to create a provider, which is in turn used to apply the classNames that get set.

The css file is used for expressing the styles. It's up to you for where to stick it, but there are a few options:

  1. Stick it directly in your html:
    In my case, I literally put it in my public folder, and added:
    <link rel="stylesheet" href="/react-toolbox/theme.css" />

  2. Stick it in a css import if you're using webpack. I've identified a potential bug on this. react-toolbox-themr uses only the local name for applying classNames to toolbox components, while most react-toolbox documentation tells you to use the pattern [name]--[local]--[hash:base64:8]

As a workaround for webpack:
change config->module->rules->[your css rule]->use->style-loader->options->localIdentName
from [name]--[local]--[hash:base64:8] to [local] and import your css somewhere (you don't need to use it in your code.

EDIT: This breaks some styles on react-toolbox itself. Would not recommend.

EDIT 2: I've tried making this work for hours. It is impossible.

@usmansc
Copy link

usmansc commented Dec 25, 2022

Well after many years I have encountered the same issue. Were you able to solve it?

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants