Kevin Powell - Community•2y ago

React styled components with Sass

Hey guys, more of a general question so forgive me if some things are not clear. I'd like to use styled components in React as it seems to make changing styles way easier than if I followed the 7-1 Sass pattern. My only concern is what would the folder structure look like if I want to have global variables/functions/mixins? Would it be possible to get a quick folder structure that you use?

4 Replies

Joao•2y ago

With styled components you have one parent component that wraps the entire app which takes on prop, theme, which is an object containing css styles.

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      ... components go here
    </ThemeProvider>
  );
};

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      ... components go here
    </ThemeProvider>
  );
};

And then theme is just an object you can place in some other directory, and is just an object:

export const theme = {
  colors: {
    primary: {
      default: "#FF8C00",
      dark: "#eb904a",
      light: "#ecbc37",
    }
  },
  whatever: {},
  whatever2: "2px"
};

export const theme = {
  colors: {
    primary: {
      default: "#FF8C00",
      dark: "#eb904a",
      light: "#ecbc37",
    }
  },
  whatever: {},
  whatever2: "2px"
};

vinceOP•2y ago

Right that makes sense but maybe I misunderstood but I'm thinking about it more in a stylesheet sense. So for example, here is my project structure:

src/
  Components/
    Title/
      Title.js
      Title.scss
    Text/
      Text.js
      Text.scss
  App.js
  ...

src/
  Components/
    Title/
      Title.js
      Title.scss
    Text/
      Text.js
      Text.scss
  App.js
  ...

Pretty typical project structure from what I've seen. But then I want to add a gloabl scss stylesheet that I can import in any of my components. Where would I put that? Should I make a separate directory? What's common practice?

Joao•2y ago

Well, I don't know really what common practice is since react doesn't enforce a particular structure so every project follows their own. However what I do is create a common directory that shares anything that is meant to be accessible throughout the app. For example:

src/
  features/
    user/
      AuthForm.tsx
      UserProfile.tsx
  common/
    components/
      Modal/
        Modal.tsx
        Modal.styled.tsx
    styles/
      GlobalStyles.tsx
      theme.ts

src/
  features/
    user/
      AuthForm.tsx
      UserProfile.tsx
  common/
    components/
      Modal/
        Modal.tsx
        Modal.styled.tsx
    styles/
      GlobalStyles.tsx
      theme.ts

Where a feature is a specific part of the app and contains components and other logic related to that domain specifically. Common includes things that are shared like buttons or modals, but also styles or hooks There was a recent question asked on this with a couple of links that may be useful: https://discord.com/channels/436251713830125568/1067208053985918996/1067208053985918996

vinceOP•2y ago

Thanks a lot!

Gaming

Programming

React styled components with Sass