Does mergeProps deep merge objects?

I have a syntax on my components where I define styles with an

atoms

atoms

prop like

<MyComponent atoms={{*some styles}} />

<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

mergeProps

function could help here.

Current Method: (

<Text />

<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} />;
};

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} />;
}

import { mergeProps } from 'solid-js';

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

  return <Text {...propsWithBaseStyles} />;
}

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

atoms

prop like

<MyComponent atoms={{*some styles}} />

<MyComponent atoms={{*some styles}} />

mergeProps

mergeProps

function could help here.

Current Method: (

<Text />

<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} />;
};

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} />;
}

import { mergeProps } from 'solid-js';

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

  return <Text {...propsWithBaseStyles} />;
}

Does mergeProps deep merge objects?

Similar Threads

Does mergeProps deep merge objects?

Similar Threads

Similar Threads

Similar Threads