search

sea-design / sea-design

🌊 A React UI library
https://sea-design.github.io
MIT License
13 stars 4 forks source link

CSS in JS #8

Open Brooooooklyn opened 3 years ago

Brooooooklyn commented 3 years ago 
  const className = classnames('text-white', 'rounded', {
    'bg-blue-500': type === 'primary',
    'bg-blue-400': type === 'secondary',
    'bg-gray-500': type === 'tertiary',
    'bg-yellow-500': type === 'warning',
    'bg-red-500': type === 'danger',
    'py-3 px-6': size === 'default',
    'py-1 px-1': size === 'small',
    'py-4 px-7': size === 'large',
  });

The css in js way:

styled.button<{ type: ButtonType }>(({ type }) => ({
  bg: BG_COLORS[type],
  size: SIZE[type],
}))

And in this way, html props can easily pass to the button under the hood, and it's more i11y friendly.

Brooooooklyn commented 3 years ago

BTW, node-sass is shit.

SASUKE40 commented 3 years ago

BTW, node-sass is shit.

I have removed it.

SASUKE40 commented 3 years ago 
  const className = classnames('text-white', 'rounded', {
    'bg-blue-500': type === 'primary',
    'bg-blue-400': type === 'secondary',
    'bg-gray-500': type === 'tertiary',
    'bg-yellow-500': type === 'warning',
    'bg-red-500': type === 'danger',
    'py-3 px-6': size === 'default',
    'py-1 px-1': size === 'small',
    'py-4 px-7': size === 'large',
  });

The css in js way:

styled.button<{ type: ButtonType }>(({ type }) => ({
  bg: BG_COLORS[type],
  size: SIZE[type],
}))

And in this way, html props can easily pass to the button under the hood, and it's more i11y friendly.

CSS in JS sounds great. However, this project is based on Tailwind CSS, it prefers using classname to specify styles.

SASUKE40 commented 3 years ago

After consideration, there is no doubt that style-component is a nice way to integrate tailwind css in react component. Thanks for your suggestion.

Brooooooklyn commented 3 years ago

After consideration, there is no doubt that style-component is a nice way to integrate tailwind css in react component.

I will recommend emotion for smaller size and better runtime performance.

SASUKE40 commented 3 years ago

After consideration, there is no doubt that style-component is a nice way to integrate tailwind css in react component.

I will recommend emotion for smaller size and better runtime performance.

I have already used emotion