Styling components

stereobooster - Sep 8 '23 - - Dev Community

style prop 

<div style={{ color: "red" }} />
Enter fullscreen mode Exit fullscreen mode

style prop it the most basic CSS-in-JS solution. But it doesn't support:

styled function 

const Box = styled.div`
  color: red;
`;
<Box />;
Enter fullscreen mode Exit fullscreen mode

or

const Box = styled('div', {
 color: "red"
})
<Box />
Enter fullscreen mode Exit fullscreen mode

There are a lot of implementation. Some examples:

Styles-as-props

aka: Style Props. Styles are exposed as props:

<Box display="flex" position="absolute" top={0} />
Enter fullscreen mode Exit fullscreen mode

There are a lot of implementation. Some examples:

Often combined with polymorphic as (is, component) prop and data prop.

<Box as="span" data={{ testid: "customIdentifier" }} />
Enter fullscreen mode Exit fullscreen mode

Responsive styles-as-props

Variation of styles-as-props to support size media-queries:

<Box padding={{ mobile: "small", tablet: "medium" }} />
Enter fullscreen mode Exit fullscreen mode

There are a lot of implementation. Some examples:

sx prop

aka: css-prop. Can be considered as a variation of style prop:

<Box sx={{ border: 1 }} />
Enter fullscreen mode Exit fullscreen mode

But it resolves issues (depending on implementation) with:

  • mediaqueries
  • pseudo-classes
  • pseudo-elements
  • theming 
<Box
  sx={[
    // theme prop
    color: 'primary.main',
    // or
    (theme) => ({ color: theme.palette.primary.main }),
    // responsive prop
    width: { xs: 100, sm: 200 },
    // or
    width: [100, 200, 300],
    // pseudo-classes
    '&:hover': { color: 'red' }
  ]}
/>
Enter fullscreen mode Exit fullscreen mode

There are a lot of implementation. Some examples:

Variants

aka: recipes. I call it "variants" for the lack of better name. Maybe "design system driven props"? It can look, for example, like this:

const Button = styled("button", {
  defaultVariants: {
    color: "accent",
    size: "medium",
  },
  variants: {
    color: {
      neutral: { background: "whitesmoke" },
      brand: { background: "blueviolet" },
      accent: { background: "slateblue" },
    },
    size: {
      small: { padding: 12 },
      medium: { padding: 16 },
      large: { padding: 24 },
    },
  },
});
Enter fullscreen mode Exit fullscreen mode

There are a lot of implementation. Some examples:

Variants are often go hand in hand with theme (or design tokens):

export const { styled, css } = createStitches({
  theme: {
    colors: {
      gray500: "hsl(206,10%,76%)",
      blue500: "hsl(206,100%,50%)",
      purple500: "hsl(252,78%,60%)",
      green500: "hsl(148,60%,60%)",
      red500: "hsl(352,100%,62%)",
    },
    space: {
      1: "5px",
      2: "10px",
      3: "15px",
    },
  },
});
Enter fullscreen mode Exit fullscreen mode

You can define aliases for tokens (to use semantic names):

colors: {
  background: "$gray500";
}
Enter fullscreen mode Exit fullscreen mode

You can define a different theme, for example to support dark mode.

Tokens can be "smartly" mapped, e.g. system knows where (in which section of the theme) to lookup token depending on the property:

const Button = styled("button", {
  color: "$purple500",
});
Enter fullscreen mode Exit fullscreen mode

You can define aliases for styles-as-props:

export const { styled, css } = createStitches({
  utils: {
    // Abbreviated margin properties
    m: (value) => ({
      margin: value,
    }),
    mx: (value) => ({
      marginLeft: value,
      marginRight: value,
    }),
    linearGradient: (value) => ({
      backgroundImage: `linear-gradient(${value})`,
    }),
  },
});
Enter fullscreen mode Exit fullscreen mode

See:

Bonus: comparison to Tailwind

background

styles-as-props:

// with theme
<Box backGround={(theme) => theme.colors.slate100} />
// with smart mapping
<Box backGround="$slate100" />
// with alias and smart mapping
<Box bg="$slate100" />
// with dark mode mediaqueries
<Box bg={{ light: "$slate100", dark: "$slate600" }} />
Enter fullscreen mode Exit fullscreen mode

And dark mode can be implemented at theme level.

sx prop:

<Box sx={(theme) => ({ backGround: theme.colors.slate100 })} />
Enter fullscreen mode Exit fullscreen mode

Tailwind:

<Box className="bg-slate-100 dark:bg-slate-800" />
Enter fullscreen mode Exit fullscreen mode

padding

styles-as-props:

<Box p={{ sm: 8, md: 0 }} />
Enter fullscreen mode Exit fullscreen mode

sx prop:

<Box sx={{ padding: { sm: 8, md: 0 } }} />
Enter fullscreen mode Exit fullscreen mode

Tailwind:

<Box className="p-8 md:p-0" />
Enter fullscreen mode Exit fullscreen mode

flex

styles-as-props:

<Box flex={{ md: true }} />
Enter fullscreen mode Exit fullscreen mode

sx prop:

<Box sx={{ flex: { md: true } }} />
Enter fullscreen mode Exit fullscreen mode

Tailwind:

<Box className="md:flex" />
Enter fullscreen mode Exit fullscreen mode

Summary

To me they look the same, except that Tailwind doesn't require runtime and works with server components ¯\_(ツ)_/¯. Only variants look different.

Related:

CSSModules-vibe 

const styles = StyleSheet.create({ root: { flex: 1, opacity: 0 } });
const Component = () => <View style={styles.root} />;
Enter fullscreen mode Exit fullscreen mode 
export default () => (
  <div>
    <p>only this paragraph will get the style :)</p>
    <style jsx>{`
      p {
        color: red;
      }
    `}</style>
  </div>
);
Enter fullscreen mode Exit fullscreen mode 
const useStyles = createUseStyles({
  myButton: {
    color: "green",
  },
  myLabel: {
    fontStyle: "italic",
  },
});

const Button = () => {
  const classes = useStyles();
  return (
    <button className={classes.myButton}>
      <span className={classes.myLabel}></span>
    </button>
  );
};
Enter fullscreen mode Exit fullscreen mode
Image
Five Things You Didn't Know About Leg And Arm Injury Lawyers
Image
5 Head Injury Lawyer Projects For Any Budget
Image
How to detect your Python library path from docker in your VS Code
Image
15 Facts Your Boss Wished You Knew About Average Settlement For Asbestos Exposure
Image
What is Test Observability and How Does it Improve the Testing Process?

observability, testing
Image
service
Image
How to Find the Perfect Head Injury Compensation Claims On the Internet
Image
Ten Startups That Are Set To Change The Crypto Coin Casino Industry For The Better
Image
15 Twitter Accounts That Are The Best To Learn About Personal Injury Claims
Image
Couch: The Good, The Bad, And The Ugly
Image
Cat Flap Installation - How to Choose and Install a Cat Flap
Image
How You Can Use A Weekly Crypto Casino Games Project Can Change Your Life
Image
The Full Guide To Asbestos Mesothelioma Lawyers
Image
Watch Out: How Asbestos Lawyer Mesothelioma Is Taking Over And What Can We Do About It
Image
How to quickly add API Key validation to a Node Express API

api, express, middleware, apikeys
Image
The 12 Types Of Twitter Asbestos Payouts People You Follow On Twitter
Image
Dremio, Apache Iceberg and their role in AI-Ready Data

database, dataengineering, datascience, dataanalytics
Image
15 Asbestos Cancer Law Lawyer Mesothelioma Settlement Benefits Everybody Must Know
Image
Metode Manfaatkan Bonus Di Dalam Permainan Judi Online
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .