styled-components
styled-components.com › docs › api
styled-components
import styled from 'styled-components'; import Header from './Header'; const NewHeader4 = styled(Header).withConfig({ shouldForwardProp: (prop) => !['customColor'].includes(prop), })<{ customColor: string }>` color: ${(props) => props.customColor}; `;
GitHub
github.com › styled-components › styled-components › issues › 3956
TypeError: Cannot read properties of undefined (reading 'withConfig') · Issue #3956 · styled-components/styled-components
February 28, 2023 - I'm making a ui library (including Flex, Stack, etc.) that wraps styled-components called @jsxcss/styled-components. This library works fine with create-react-app. However, in the Next.js environment, Server Error It doesn't work well with the error TypeError: Cannot read properties of undefined (reading 'withConfig').
Author manudeli
reactjs - "TypeError: Cannot read properties of undefined (reading 'withConfig')" styled-components/react/rollup/babel - Stack Overflow
6 Using styled-components results in `cannot read withConfig of undefined` More on stackoverflow.com
styled-components withConfig not supported
Do you want to request a feature or report a bug? Bug What is the current behavior? styled-components types don't support .withConfig. https://styled-components.com/docs/api#shouldforwardprop I... More on github.com
0
April 30, 2021styled.css.withConfig is not a function Error using Rollup
I'm using Rollup for build and distribute my React components . When I use css from styled component, any import in that bundle fails ie: import styled, { css } from 'styled-components'... More on github.com
8
July 15, 2019withConfig not supported
styled-components / vscode-styled-components Public archive ... This repository was archived by the owner on Jun 30, 2024. It is now read-only. ... When using withConfig it doesn't recognize css code. More on github.com
4
August 7, 2017Videos
DEV Community
dev.to › cameljohn › styled-components-avoiding-transient-props-58m8
styled-components - avoiding transient props - DEV Community
September 28, 2022 - const SomeStyleComponentsComponent = styled(Extended3rdPartyComponent).withConfig({ shouldForwardProp: (prop) => preventTransientPropForwarding(prop), })``; although the API will tell you to prefix props with $ to prevent the propagation, that is still manual. ... import _styled, { AnyStyledComponent, ThemedStyledFunction } from 'styled-components'; export function styled( element: | AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any> ): ThemedStyledFunction< typeof element, any, object, string | number | symbol > { return _styled(element).withConfig({ shouldForwardProp: (prop: any) => !preventPropLeak(prop), }); }
Stack Overflow
stackoverflow.com › questions › 74571914 › typeerror-cannot-read-properties-of-undefined-reading-withconfig-styled-c
reactjs - "TypeError: Cannot read properties of undefined (reading 'withConfig')" styled-components/react/rollup/babel - Stack Overflow
But when I publish it on npm and trying to use it in another react project, created via npx create-react-app I'm constantly getting and error "TypeError: Cannot read properties of undefined (reading 'withConfig')" in console and my app doesn't show anything. ... { "env": { "development": { "plugins": [ [ "babel-plugin-styled-components", { "ssr": true, "displayName": true, "preprocess": false } ], [ "module-resolver", { "alias": { "@src": ["./src"], "@components": ["./src/components"], "@utils": ["./src/utils"] } } ] ], "presets": ["@babel/preset-react", "@babel/preset-env"] }, "production": { "plugins": [ [ "babel-plugin-styled-components", { "ssr": true, "displayName": true, "preprocess": false } ] ], "presets": ["@babel/preset-react", "@babel/preset-env"] } }, "plugins": [ [ "styled-components", { "ssr": true, "displayName": true, "preprocess": false } ] ] }
Jser
jser.dev › 2023-10-09-styled-components
The Internals of Styled Components
Both displayName and componentId are automatically added. We’ve seen how withConfig() works in section 2.2. The transformation could be easily found in babel-plugin-styled-components.
GitHub
github.com › flow-typed › flow-typed › issues › 4068
styled-components withConfig not supported · Issue #4068 · flow-typed/flow-typed
April 30, 2021 - Do you want to request a feature or report a bug? Bug What is the current behavior? styled-components types don't support .withConfig. https://styled-components.com/docs/api#shouldforwardprop If the current behavior is a bug, please prov...
Author FezVrasta
GitHub
github.com › styled-components › styled-components › issues › 2681
styled.css.withConfig is not a function Error using Rollup · Issue #2681 · styled-components/styled-components
July 15, 2019 - If I remove the css (checkedStyles) component start working again · import commonjs from 'rollup-plugin-commonjs'; import babel from "rollup-plugin-babel"; import resolve from 'rollup-plugin-node-resolve'; import css from 'rollup-plugin-css-porter'; import svg from 'rollup-plugin-svg'; module.exports = { input: 'src/index.js', output: { file: 'dist/bundle.js', name: 'rolluptest', format: 'cjs', globals: { 'styled-components': 'styled' } }, external: ['react', 'styled-components'], plugins: [ babel({ exclude: 'node_modules/**' }), resolve(), commonjs(), css(), svg() ] };
Author fjn2
GitHub
github.com › styled-components › vscode-styled-components › issues › 29
withConfig not supported · Issue #29 · styled-components/vscode-styled-components
August 7, 2017 - When using withConfig it doesn't recognize css code. When removing withConfig it works correctly. const Foo = styled.div.withConfig({ displayName: 'Foo' })` display: flex; `;
Author tolnai
GitHub
github.com › acrazing › typescript-styled-components-plugin › blob › master › src › withConfig.ts
typescript-styled-components-plugin/src/withConfig.ts at master · acrazing/typescript-styled-components-plugin
A styled components plugin to minify & set componentId & displayName for typescript - typescript-styled-components-plugin/src/withConfig.ts at master · acrazing/typescript-styled-components-plugin
Author acrazing
GitHub
github.com › styled-components › babel-plugin-styled-components › issues › 188
styled.css error: "Cannot read property 'withConfig' of undefined" · Issue #188 · styled-components/babel-plugin-styled-components
December 7, 2018 - Hello, When I am interpolating a const that contains a styled-component into another styled-component using styled.css, I get type error: Cannot read property 'withConfig' of undefined const foo = styled.css` padding: 0; `; const StyledW...
Author radiocontrolled
Reddit
reddit.com › r/reactjs › updated packages, now my styled-components pass all their custom props to the dom, triggering an unknown prop warning everywhere...
r/reactjs on Reddit: Updated packages, now my styled-components pass all their custom props to the DOM, triggering an Unknown Prop Warning everywhere...
January 10, 2024 -
I was so happy in my previous repo with styled-components 5.3.6, making thousands of styled-components components with all that dynamic stuff with the help of custom props. I made sure to respect the reserved prop names like 'disabled' (I would call it isDisabled instead) and it was awesome.
Now, new project, new repo, I decide to take the latest packages, including styled-components 6.1.2 and I would adapt to new changes. For once I even managed to avoid the usual. So I work for many hours without noticing any red warning in the console related to my custom props... until today:
Warning: React does not recognize the `isPanelExpanded` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `ispanelexpanded` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
Of course it doesn't recognize it. That prop was never meant for the DOM elements. And I suppose this is why:
Dropped automatic prop filtering; use transient props ($ prefix) for stuff you don't want to be passed to child component / HTML (styled-components/releases/tag/v6.0.0)
The workarounds:
-
$isPanelExpanded. Ugly.
-
styled('div').withConfig({ shouldForwardProp: (prop) => !['isPanelExpanded'].includes(prop)}). No. Just.. no.
-
Roll back to an outdated styled-components like a piece of sh**?
Someone please tell me I missed the simple elegant solution to this nonsense. Wake me from this nightmare, please. *screams (from home, not at the office)*
Top answer 1 of 3
15
I've an idea; use transient props ($ prefix) for stuff you don't want to be passed to child component
2 of 3
7
https://styled-components.com/docs/faqs#shouldforwardprop-is-no-longer-provided-by-default This is a quick way to bring back v5 behaviour if you don't want to change all your props to use the $ prefix.
jsDocs.io
jsdocs.io › package › styled-components
styled-components@6.3.5 - jsDocs.io
January 16, 2026 - ) => Styled< R, PrivateResolvedTarget, PrivateResolvedTarget extends KnownTarget · ? Substitute< Substitute< OuterProps, React.ComponentPropsWithRef<PrivateResolvedTarget> >, Props · > : PrivateMergedProps, OuterStatics · >; withConfig: ( config: StyledOptions<R, OuterProps> ) => Styled<R, Target, OuterProps, OuterStatics>; <Props extends object = BaseObject, Statics extends object = BaseObject>( initialStyles: Styles<Substitute<OuterProps, NoInfer<Props>>>, ...interpolations: Interpolation<Substitute<OuterProps, NoInfer<Props>>>[] ): IStyledComponent<R, Substitute<OuterProps, Props>> & OuterStatics & Statics & (R extends 'web' ?
Hotexamples
typescript.hotexamples.com › examples › styled-components › div › withConfig › typescript-div-withconfig-method-examples.html
TypeScript div.withConfig Examples, styled-components.div.withConfig TypeScript Examples - HotExamples
withConfig (5) Example #1 · 0 · Show file · File: index.style.ts · Project: notejs/gaea-editor · import styled from 'styled-components'; export const Container = styled.div.withConfig({ componentId: 'main-tool-container' })` display: flex; flex-grow: 1; height: 100%; .ant-tabs { flex-grow: 1; display: flex; flex-direction: column; } .ant-tabs-content { flex-grow: 1; } .ant-tabs-nav .ant-tabs-tab { padding: 10px 16px; } .ant-tabs-bar { margin-bottom: 0; height: 40px; min-height: 40px; } `; export const ScrollContainer = styled.div` display: block; overflow-x: hidden; overflow-y: auto; height: 100%; width: 300px; `; Example #2 ·
GitHub
github.com › styled-components › babel-plugin-styled-components › issues › 36
Error "withConfig is not a function" · Issue #36 · styled-components/babel-plugin-styled-components
March 22, 2017 - Hi, I just installed the plugin as described but when I try to bundle code using webpack the next error arise: TypeError: _styledComponents2.default.h1.withConfig is not a function Am I missing som...
Author acanimal
GitHub
github.com › styled-components › stylelint-config-styled-components
GitHub - styled-components/stylelint-config-styled-components: The shareable stylelint config for stylelint-processor-styled-components
The shareable stylelint config for stylelint-processor-styled-components - styled-components/stylelint-config-styled-components
Starred by 68 users
Forked by 10 users
Languages JavaScript 100.0% | JavaScript 100.0%
GitHub
github.com › styled-components › babel-plugin-styled-components › issues › 216
styled.keyframes.withConfig is not a function · Issue #216 · styled-components/babel-plugin-styled-components
April 5, 2019 - Reopening #213 as I'm still experiencing this issue despite the suggestion provided. I'm using v3.4.10 of styled-components and v1.10.0 of babel-plugin-styled-components. This is what I'm using in my component : import styled, { keyframe...
Author maeligg
GitHub
github.com › styled-components › babel-plugin-styled-components › issues › 16
Update to new syntax · Issue #16 · styled-components/babel-plugin-styled-components
December 17, 2016 - As of styled-components/styled-components#227 the new syntax for the private API is .withConfig: const Box = styled.div.withConfig({ displayName: 'Box', componentId: 'Button_asdf123' })` styles: here; ` This avoids issues on ReactNative where target would before need to be View (no string) and we'd need to import it, which would've made everything much more compilcated.
Author mxstbr
Top answer 1 of 3
20
Use Transient props
TL;DR just prefix your attriibute with
$sign. example$borderColor,$black,$any,$attribute.
If you want to prevent props meant to be consumed by styled components from being passed to the underlying React node or rendered to the DOM element, you can prefix the prop name with a dollar sign ($), turning it into a transient prop.
// typescript example
const BaseButton = styled(Button)<{ $borderColor: string }>`
border-color: ${({ $borderColor }): string => $borderColor};
`;
// js
const BaseButton = styled(Button)`
border-color: ${({$borderColor}) => $borderColor}
`;
// usage
<BaseButton $borderColor="red">Button</BaseButton>
2nd method
Checkout shouldForwardProp
const Comp = styled('div').withConfig({
shouldForwardProp: (prop, defaultValidatorFn) =>
!['hidden'].includes(prop)
&& defaultValidatorFn(prop),
}).attrs({ className: 'foo' })`
color: red;
&.foo {
text-decoration: underline;
}
`;
render(
<Comp hidden draggable="true">
Drag Me!
</Comp>
);
2 of 3
2
Your existing code was already right, but react gave you two options :
1) use lower case than snake-case
2) remove the attribute from DOM (you took this approach)
From the code I can see that you need the prop borderColor, but in the custom styling, you separated the props
({borderColor,... rest}) => <Button {...rest} />
You removed the border Color prop but you try to access in styled props the next line.
Instead try to rename the prop to bordercolor if you want warning to go away or just ignore warning.
UNPKG
unpkg.com › browse › @types › styled-components@5.1.25 › index.d.ts
types/styled-components/index.d.ts
ation>; export type Interpolat...cComponent<any>>; // Config to be used with withConfig export interface StyledConfig<O extends object = {}> { // TODO: Add all types from the original StyledComponentWrapperProperties componentId?: string; displayName?: string; shouldForwardProp?: ...