Box component - what is the best way of cleaning up props rendered on the dom when using styled?

[blurymind]

Describe the bug
I have a box component made using the styled-system props. Its not done via emotion. The problem is that all box props end up on the dom. I am wondering if there is some sort of a clean solution for this that wouldnt require adding tons of extra code to maintain.

To Reproduce
Here is some code you can use to reproduce it

import styled from "styled-components";
import { color, layout, position, space, border, shadow, flexbox, compose, system, textAlign } from "styled-system";

export const BoxStyledProps = compose(space, color, layout, position, border, shadow, flexbox, textAlign);
export const StyledBox = styled.div(BoxStyledProps);

Expected behavior
None of the props I pass to my StyledBox end up on the actual dom

Screenshots

color and height should not be there

Additional context
I know there is some doc about this somewhere, but it really isnt clear on how to actually deal with the situation in the context of using the true power of styled-system props for creating a box

[LoiKos]

Hello,

related docs are : https://styled-system.com/guides/removing-props-from-html

Docs exposed 2 methods to avoid passing props to HTML. In your case you need the first one using this package :
npm i @styled-system/should-forward-prop

The docs only mentioned emotion but it should work with styled-components as well. You need to use this https://styled-components.com/docs/api#shouldforwardprop

styled-system/should-forward-prop give you all props links to styled-system but actually you can also add yours if you need to add more 😄

[marcin-piechaczek]

With styled components you can do something like this:

import styled, { css } from 'styled-components';
import { color, typography, layout, border, shadow, space } from 'styled-system';
import { props } from '@styled-system/should-forward-prop';

const Typography = styled('span').withConfig({
  shouldForwardProp: (prop, defaultValidatorFn) => !props.includes(prop) && defaultValidatorFn(prop)
})`
  ${color}
  ${typography}
  ${layout}
  ${border}
  ${shadow}
  ${space}
`;

export default Typography;

I'm looking for a global place to add those settings before each styled component, here is a related issue.

[blurymind]

@marcin-piechaczek thanks this is very helpful :) It does have one disadvantage and that is having to add withConfig to every component that takes in box props.

Is it possible to abstract this somehow?

Lets say I have this in one place

// Box component
export const BoxStyledProps = compose(space, color, layout, position, border, shadow, flexbox, someUtilProps, textAlign);

and then every component I want to get box props for me has this

const MyOtherComponent = styled.div`
....
  ${BoxStyledProps}
`;

const AnotherComponent = styled.div`
....
  ${BoxStyledProps}
`;

In this example MyOtherComponent and AnotherComponent take in box props, is there a way to not have to add withConfig to both of them and somehow keep it in one place - preferably the Box component?

[The-Code-Monkey]

@LoiKos The shouldForwardProp built into styled-system is for emotion only.

[blurymind]

@LoiKos The shouldForwardProp built into styled-system is for emotion only.

it does appear to work in styled too, there is just the problem I mentioned in my previous post

[marcin-piechaczek]

@blurymind You can solve this problem with the @The-Code-Monkey solution mentioned here.

Use your own method to import/export styled with withConfig method.

[LoiKos]

@The-Code-Monkey yes it is. But i believe it's because the docs have been written before styled-components provide an official way to handle that. When I was looking for withConfig juste before it was out, the docs was already the same on that parts.

@blurymind to solve your problem instead of using div you can use whatever component you want e.g:

const Wrapper = styled.div.withConfig(**your config goes here**)

const MyOtherComponent = styled(Wrapper)`
....
  ${BoxStyledProps}
`;

const AnotherComponent = styled(Wrapper)`
....
  ${BoxStyledProps}
`;

[LoiKos]

Another solution is to keep adding withConfigto each component when needed and to build a common shouldForwardProp mecanism e.g:

// props-blocker.js
import { props } from '@styled-system/should-forward-prop'

const toRemoveProps = [
  ...props,
]  // You can add whatever prop you like here

const regex = new RegExp(`^(${toRemoveProps.join('|')})$`)

const shouldForwardProp = (prop, defaultValidatorFn) => {
  return !regex.test(prop)
}

export { shouldForwardProp }


// ComponentA.js
import {shouldForwardProp} from 'path/to/props-blocker.js'
const ComponentA = styled.div.withConfig({ shouldForwardProp })``

[blurymind]

@LoiKos thanks for the suggestions

I want to avoid doing this

const Wrapper = styled.div.withConfig(**your config goes here**)

const MyOtherComponent = styled(Wrapper)`
....
  ${BoxStyledProps}
`;

specifically styling the wrapper which is in itself a styled component noticeably impacts mount time when you have lots of components rendered

On the second suggestion - do you think memoizing shouldForwardProp could be benefitial? Its kind of a pain, but I need to find the cheapest approach possible

[LoiKos]

Sorry not sure to understand your question. You are supposed to provide a callback as shouldForwardProp but unfortunately it's up to styled-component to run it so you can't really control how it will be used.

Depend how it work internally inside Styled-component. Anyway the function you provided in production will never change so i don't think you need to memoize it.

[marcin-piechaczek]

Here is the updated info about using shouldForwardProp with styled-components:

import styled from 'styled-components';
import { space, layout } from 'styled-system';
import shouldForwardProp from '@styled-system/should-forward-prop';


const Wrapper = styled.div.withConfig({
  shouldForwardProp
})`
  ${space};
  ${layout};
  position: relative;
  height: 42px;
  border: 0;
  padding: 0;
  margin-top: 20px;
`;

There are currently no official methods to apply withConfig globally. You can achieve this by making your own "styled" wrapper, but I encountered problems in situations where the styled parameter was another component or an SVG file.