Having trouble setting negative margins

[danchristian]

I am creating a compomnent that takes a space value as a prop

<Columns space="large">

I then want that value translated into a negative value for margin and positive for padding. But am stuck on how to get the negative margin part. Doing -${space} then outputs -large in the inspector (obviously).

/** @jsx jsx */
import { jsx } from "theme-ui";

export default function Columns({ space, children }) {
  return (
    <div
      sx={{
        display: "flex",
        flexDirection: "row",
        marginLeft: space,
        "> div": { paddingLeft: space },
      }}
    >
      {children}
    </div>
  );
}

  space: {
    none: 0,
    gutter: 24,
    xxsmall: 4,
    xsmall: 8,
    small: 12,
    medium: 20,
    large: 32,
    xlarge: 48,
    xxlarge: 96,
    xxxlarge: 128,
  }

[atanasster]

@danchristian , one way would be to use a function resolver for the property:

/** @jsx jsx */
import { jsx, get } from "theme-ui";

export const Columns = ({ space, children }) => {
  return (
    <div
      sx={{
        display: "flex",
        flexDirection: "row",
        marginLeft: (t) => -get(t, `space.${space}`, space),
        "> div": { paddingLeft: space }
      }}
    >
      {children}
    </div>
  );
};

full cs: https://codesandbox.io/s/goofy-cache-9wwri?file=/src/components/Columns.js

[danchristian]

@atanasster Ok that works, so thank you, but I have no idea what that code is doing! I need to go and read up on existential getter functions.

[atanasster]

@danchristian get is a utility function for accessing the theme keys -in your example the spaces are in theme.space

You can also use the theme object directly, something like:

marginLeft: (t) => t.space[space] || space,

[danchristian]

@atanasster Hey, one last question on this. I've had trouble getting responsive margins working with the get utility function. So I can now do <Columns space="large"> and it will produce a negative margin, but I can't yet get it to work with <Columns space={["small", "large"]}> - it will just apply the small across all breakpoints.

[atanasster]

@danchristian - you just need to map the spaces to a responsive array, here is an updated example:

https://codesandbox.io/s/goofy-cache-9wwri?file=/src/components/Columns.js

[hasparus]

Well, we didn't implement responsive margin in your Columns component, right?

        marginLeft: (t) => -get(t, `space.${["small", "large"]}`, space),

doesn't make much sense.

A ternary operator and Array.isArray are your friends here.

[danchristian]

Thanks @atanasster and @hasparus - this was very helpful in me understanding it!