Styles from alternate layout applied to CoreLayout

[ajwagner777]

So this is kinda a weird problem, but I'll do my best to explain. I have 2 base layouts (in src/layouts. One of them is for the main app, and the other is for a login (unauthenticated) layout. The styles are distinct, and nothing from core imports the auth, and visa-versa. However, for some reason the auth layout styles are being applied to the Core layout. Here's some of my config (note that I have pretty significantly altered the folder structure of the app, but I don't believe that to be the issue):

my createRoutes method:

import DefaultLayout from './layouts/Default/Default'

import Home from '../modules/Home/routes'
import Dashboard from '../modules/Dashboard/routes'

import AuthLayout from './layouts/Auth'
import {AuthIndex, AuthChildren} from '../modules/Auth/routes'

export const createRoutes = (store) => ([
  {
    path: '/',
    component: DefaultLayout,  //Formerly CoreLayout
    indexRoute: Home,
    childRoutes: [
      Dashboard(store) //An initial route based on the "counter" route
    ]
  },
  {
    path: '/login',
    component: AuthLayout,
    indexRoute: AuthIndex(store),
    childRoutes: AuthChildren(store)
  }
])

The AuthLayout component imports Auth.scss, in which I give the body some custom styling. The trouble is that those styles are applied to the DefaultLayout as well. I can post some more information as needed, but don't want to overwhelm. Any help would be greatly appreciated.

[jmschneider]

Are you loading both Auth.scss and DefaultLayout.scss as :global? In my brief testing, global styles aren't removed with the component is unmounted. You can nest :global inside a selector to limit their scope but this probably won't help with styling the body.

This article talks about using componentWillMount and componentWillUnmount to toggle classes on the body. That should work on your AuthLayout and DefaultLayout components.

import React from 'react'
import classes from 'style/Auth.scss'

class AuthLayout extends React.Component {
  componentWillMount() {
    document.body.classList.add(classes.Auth)
  }
  componentWillUnmount() {
    document.body.classList.remove(classes.Auth)
  }
  render() {
    return this.props.children
  }
}

I did a quick test and that works for me. If you want nested styles in Auth.scss, you can try this:

.Auth {
  /* Body styles */

  :global {
    /* Nested styles */
  }
}

[vyerneni17]

Hi, did this work for you ? I'm also having the same issue but instead of a Class I'm using a stateless functional component. How do I call componentWillMount() and Unmount() in this case ?

Here's what I have in my Layout which is completely different from my ActualLayout.

export const AlternateLayout = ({ children }) => ( <all my JSX> ) AlternateLayout.propTypes = {propTypes here} export default AlternateLayout