Styled-Components VS SASS (Scss) or Less

Equivalent of scss @import for styled-components?

You can declare css styles with the css helper from styled-components and then invoke it where you need it:

export const cleanSlateRules = css`
// styles
`;

export const StyledWhatever = styled.div`
  ${cleanSlateRules}
`;

EDIT: Turns out this currently doesn't work in prod. I think because of the same issue as the @import problem.

EDIT 2: I got this to work in production using the babel plugin for styled components. The custom css was successfully applied after that. See my answer here: styled-components only rendering certain styles after successful build with parcel

How to get Scss in styled component?

I suggest you use the styled-component and styled-system

import styled from "styled-component";

const StyledComponent = styled.p `
  // scss content
  color:red;
  ...
`

Const StyledComponent1 = styled(StyledComponent)`
  // scss content
`

You can use your object it already have done by you easily.

const AnyStyledComponent = styled(AnyComponent)(
{
   // style object(as you have done)
},
variant({
  prop: "color",
  variants: {
    white: {
     color: "#fff"
    },
    black: {
      color: "#000"
    }
  }
})
)

And also you can refer to Theming in styled-components

Related Topics