SolidJSS
SolidJS•4y ago•
2 replies
jesseb34r

Does mergeProps deep merge objects?

I have a syntax on my components where I define styles with an atoms prop like <MyComponent atoms={{*some styles}} />. As I am building out by components, I want to be able to set base styles with this prop but also allow the consumer of the component to define an atoms prop and have it merge with the base styles. I'm currently using lodash merge for this but was wondering if the mergeProps function could help here.

Current Method: (<Text /> takes the atoms prop)
import { merge } from 'lodash';
import { splitProps } from 'solid-js';

const Heading: ArtisanComponent<'h2'> = (props) => {
  const [local, others] = splitProps(props, ['atoms']);

  return <Text atoms={merge({/*base styles*/}, local.atoms)} {...others} />;
};


Cleaner method that I am unsure if works:
import { mergeProps } from 'solid-js';

const Heading: ArtisanComponent<'h2'> = (props) => {
  const propsWithBaseStyles = mergeProps({atoms: {/*base styles*/}, props);

  return <Text {...propsWithBaseStyles} />;
}
Was this page helpful?