Just adding on to the answer by @Evanss
You can make the mixin a function (as in OP) by doing:
const theme = {
sectionMixin: (radius) => `border-radius: ${radius};`
}
and then use it like:
const Button = styled.button`
${props => props.theme.sectionMixin('3px')}
`
or simply:
const Button = styled.button`
${({ theme }) => theme.sectionMixin('3px')}
`
styled-components
styled-components.com › docs › advanced
styled-components
This is a bit cumbersome to work with, but it means that we can receive variables, functions, or mixins (css helper) in styled components and can flatten that into pure CSS.
Netlify
maddev.netlify.app › development › styled_components_mixins
💅 Styled Components Mixins
We’ll start by implementing a mixin for box-shadow something that is very likely to get reused. const baseShadow = ` box-shadow: 0 10px 6px -6px #777; `; In order to “inject” the needed css we need to use template strings which is what you normal use when writing styled components.
Stack Overflow
stackoverflow.com › questions › 73013057 › how-to-make-styled-components-mixins-with-props-as-css-property
reactjs - How to make styled components mixins with props as css property? - Stack Overflow
To set CSS mixin in Container, just use the mixin without CSS property. import styled, { css } from 'styled-components'; const TestMixin = ({ color }) => css` background-color: ${color === 'blue' ?
Medium
vegeloper.medium.com › advanced-mixins-in-styled-components-2702d60d730
Advanced Mixins in Styled-Components | by Khashi Akhavan | Medium
October 23, 2021 - A legacy solution for these scenarios in most preprocessors is to define mixins and global — CSS variables to minimize copy/paste overhead. Alternatively, Styled-Components offers a more modern solution, and that is a combination of JavaScript Objects, Theming and Props.
Top answer 1 of 2
12
Just adding on to the answer by @Evanss
You can make the mixin a function (as in OP) by doing:
const theme = {
sectionMixin: (radius) => `border-radius: ${radius};`
}
and then use it like:
const Button = styled.button`
${props => props.theme.sectionMixin('3px')}
`
or simply:
const Button = styled.button`
${({ theme }) => theme.sectionMixin('3px')}
`
2 of 2
6
You can create a string with multiple CSS rules and pass that to the ThemeProvider.
const theme = {
sectionMixin:
'background: white; border-radius: 5px; border: 1px solid blue;',
}
<ThemeProvider theme={theme}>
GitHub
github.com › theKashey › styled-components-mixins
GitHub - theKashey/styled-components-mixins: Use popular frameworks with Styled Components
This project is a part of *-mixins, with goal to provide a better CSS experience to the React infected people. // import classes you need from the library you need. import {class1, class2} from 'styled-components-mixins/{LIBRARY}'; // use them as mixins const Component = styled.div` ${class1} z-index: 1; `;
Starred by 30 users
Forked by 3 users
Languages JavaScript 100.0% | JavaScript 100.0%
egghead.io
egghead.io › lessons › react-create-a-css-mixin-in-react-using-styled-components
Create a CSS mixin in React using styled-components | egghead.io
In this lesson, you will learn to create a CSS mixin using styled-components. We will create a drop shadow mixin and use it on two styled-components.
Published September 7, 2018
npm
npmjs.com › package › styled-components-mixins
styled-components-mixins - npm
August 20, 2017 - This project is a part of *-mixins, with goal to provide a better CSS experience to the React infected people. // import classes you need from the library you need. import {class1, class2} from 'styled-components-mixins/{LIBRARY}';
» npm install styled-components-mixins
Published Aug 20, 2017
Version 0.0.5
Author Anton Korzunov
GitHub
gist.github.com › yuschick › fce07ec3914cf87b9f6502e0d7cde808
A collection of Styled Components mixins in TypeScript to support the use of logical CSS with physical property fallbacks. · GitHub
A collection of Styled Components mixins in TypeScript to support the use of logical CSS with physical property fallbacks. - logicalMixins.ts
CodeSandbox
codesandbox.io › examples › package › styled-components-mixins
styled-components-mixins examples - CodeSandbox
Styled Components (forked)Lets try styled components with mixins! The Chaotic Evil/Lawful Good combo we need!
Reddit
reddit.com › r/reactjs › styled-components able to use scss mixin? is this possible w/o creating a new js util?
r/reactjs on Reddit: Styled-components able to use scss mixin? Is this possible w/o creating a new js util?
January 30, 2021 -
So, I am using an external styleguide that bings in scss files as helpes/themes etc.. used across various applications of a business.
So, creating a "new app" that uses styled-components. I can't seem to use "these scss files" IN my styled-components. Can something like this be done?
@import '~myBizStyleguide/dist/colors.scss'; @import '~myBizStyleguide/dist/mixins.scss'; const HeaderSomething = styled.div` background-color: $myColorFromImport; @include myMixinFromImort ` Can this be done? Using Next.js.
Top answer 1 of 3
2
Afraid this won't work — styled-components runs in-browser, at runtime, whereas Sass needs to be precompiled on the developer's machine / before deploy. By the time styled-components runs, sass will have turned it into plain ol' CSS. The good news is, you have access to a way more powerful system with styled-components. For constants, you can keep them in a .js file, and import that into whichever .js file has your styled-components. This is awesome since you can share those constants between your styles and your business logic (plus calculate derived values with the full power of JS!) For mixins, styled-components doesn't have a direct alternative, but it has a much more powerful idea: components can be composed! It requires a bit of a mental model shift; you can't really take your Sass habits and drop them into styled-components, in the same way you can't (or, well, shouldn't) take your jQuery habits and plop them into React. But if you invest the time to learn the new methodology, I bet you'll find it worthwhile. I used Sass for years, and now I've used styled-components for years, and I find it so much better.
2 of 3
2
For those that may need this...... While we haven't figured out yet how to use Scss mixin with styled components, you could create your own mixin like this... let's say media query example... export function Media(width = null, size = null, propObj = []) { return `@media (${width}: ${size}){ ${propObj}; }` } import it to your styled-components const Category = styled.span` ${Media('min-width', "400px", ['padding: .7rem .6rem .9rem'])}; ` That is a way without scss
JavaScript in Plain English
javascript.plainenglish.io › polyfill-flex-gap-using-mixin-function-with-styled-components-201be7951fd3
Polyfill CSS using styled-components mixins in React | by Thor Chen | JavaScript in Plain English
February 10, 2022 - Unlike SCSS/SASS which is using a separate pipeline to compile styling code to CSS, styled-component allows us to write CSS using an SCSS-like syntax mixed with JavaScript, and it applies generated styles to the target React component without needing to worry about class name conflicts.
Tobbelindstrom
tobbelindstrom.com › blog › how-to-create-a-breakpoint-mixin-with-styled-components
How to create a breakpoint mixin with styled-components
March 1, 2019 - We cannot provide a description for this page right now
Stack Overflow
stackoverflow.com › questions › 53529421 › passing-mixins-to-styled-component
css - passing mixins to styled-component - Stack Overflow
November 29, 2018 - const Example = styled.div` ${p => p.theme.mixins.toolbar}; `; Edit: The issue ended up being the semi-colon next to the closing '}'. I believe adding a semi colon makes the styled-component think that you are adding a normal property, not a mixin.
GitHub
gist.github.com › freddiemixell › 6b2e4e043c0567fcc805154860e28b05
Styled Components Mixin Functions and Theme · GitHub
Styled Components Mixin Functions and Theme. GitHub Gist: instantly share code, notes, and snippets.
Medium
vegeloper.medium.com › starting-styled-mixins-in-react-f976677a81a8
Starting styled mixins in React. Part-1: How to reuse CSS in JS | by Khashi Akhavan | Medium
October 23, 2021 - Basically, to prevent writing duplicate ... issue and that was Mixins. They are incredibly easy to define and super fun to use in any style. But since the widespread adoption of writing CSS rules inside JS files, especially in the case of Styled-Components, this handy feature has ...
GitHub
github.com › dimapaloskin › styled-mixin
GitHub - dimapaloskin/styled-mixin: Simple wrapper for creating styled-components mixins
Super simple wrapper for creating styled-components mixins.
Author dimapaloskin
npm
npmjs.com › package › styled-mixin
styled-mixin - npm
January 30, 2017 - Super simple wrapper for creating styled-components mixins.
» npm install styled-mixin
Published Jan 30, 2017
Version 0.2.1
Author Dima Paloskin
Repository https://github.com/dimapaloskin/styled-mixin
CodeSandbox
codesandbox.io › s › styled-components-mixins-6xfsi
styled-components-mixins - CodeSandbox
January 29, 2020 - styled-components-mixins by stephencweiss using react, react-dom, react-scripts, styled-components