Question 167503 in CSS Question posted in
Some basic documentation can be found here.

Package React app in a way to allow the client to modify some of the CSS

I have a create-react-app project which I currently package using react-scripts build.
Currently the styling is done with scss files and once built, can be found under static/css/*.chunk.css

I have a specific scss file which defines the application’s colors. I would like the client to be able to modify these values and re-spin up the frontend with the changes applied.

I’m not sure what would be an appropriate way achieve this.
I’d appreciate some pointers. Thanks

I’ve thought about having the colors be modifiable from the django admin portal and having the frontend pull the color values from there but I’d rather not have each admin have access, I’d rather just have the installer modify the values as needed.

Tags:

2

Answers


  1. 0

    I suggest going with CSS variables instead of scss variables for the colors. The compiled CSS would reference these variables but their value can then be changed dynamically in the frontend.

    You’ll end up with something like this in your css:

    body {
  background-color: var(--bg-color);
}

    Here, --bg-color is a CSS variable. You can then set it to a specific value in the frontend. The "how" will depend on what libraries you want to use. Using emotion, it could look like this:

    import React, { useState } from "react"
import { Global, css } from '@emotion/react'

function Foo() {
  const [color, setColor] = useState("blue")
  return (
    <div>
      <Global
        styles={css`
          :root {
            --bg-color: ${color};
          }
        `}
      />
      {/* ... */}
    </div>
  )
}

    You can set a default value for the variable like this:

    body {
  background-color: var(--bg-color, red);
}
    Login or Signup to reply.
  2. 0

    Better to combine scss + css variables.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search