styled

styled(tagName: String | Function, forwardRef?: Function)

@param {String|Function} tagName The name of the dom element you'd like the styled to be applied to
@param {Function} forwardRef Forward ref function. Usually React.forwardRef
@returns {Function} Returns the tag template function.

import { styled } from "goober";

const Btn = styled("button")`
  border-radius: 4px;
`;

Different ways of customizing the styles#

Tagged templates functions#

import { styled } from "goober";

const Btn = styled("button")`
  border-radius: ${(props) => props.size}px;
`;

<Btn size={20} />;

Function that returns a string#

import { styled } from "goober";

const Btn = styled("button")(
  (props) => `
  border-radius: ${props.size}px;
`
);

<Btn size={20} />;

JSON/Object#

import { styled } from "goober";

const Btn = styled("button")((props) => ({
  borderRadius: props.size + "px",
}));

<Btn size={20} />;

Arrays#

import { styled } from "goober";

const Btn = styled("button")([
  { color: "tomato" },
  ({ isPrimary }) => ({ background: isPrimary ? "cyan" : "gray" }),
]);

<Btn />; // This will render the `Button` with `background: gray;`
<Btn isPrimary />; // This will render the `Button` with `background: cyan;`

Forward ref function#

As goober is JSX library agnostic, you need to pass in the forward ref function for the library you are using. Here's how you do it for React.

const Title = styled("h1", React.forwardRef)`
  font-weight: bold;
  color: dodgerblue;
`;

Conditional styling#

If the value of a property is undefined or null, goober will ommit them.

const Btn = styled("button")(
  (props) => `
  border-radius: ${props.rounded};
`
);

<Btn rounded="2px" />; // => `border-radius: 2;`

let isRounded = false
<Btn rounded={isRounded ? "4px" : null} />; // => `border-radius: null;`

<Btn>; // => `border-radius: undefined;`