storybook - How to dynamically style a button's background color using vanilla-extract and TypeScript - Stack Overflow

admin管理员组

文章数量:1320631

such as:

button.tsx:

import {buttonStyle} from './buttuon.css.ts'
const Button = ({backgroundColor}) => {
  return (
    <button className={buttonStyle}>button<button/>
  )
}

button.css.ts:

import { style } from '@vanilla-extract/css';
export const buttonStyle = style({
    width: '100%',
    backgroundColor: ?
});

I tried to write it this way, but it didn't solve the problem.

button.tsx:

import {buttonStyle} from './buttuon.css.ts'
const Button = ({backgroundColor}) => {
  return (
    <button className={buttonStyle(backgroundColor)}>button<button/>
  )
}

button.css.ts:

import { style } from '@vanilla-extract/css';
export const buttonStyle = (backgroundColor) => style({
    width: '100%',
    backgroundColor: backgroundColor
});

error info: storybook: You can only export plain objects, arrays, strings, numbers and null/undefined.null/undefined. storybook: Plugin: vanilla-extract

such as:

button.tsx:

import {buttonStyle} from './buttuon.css.ts'
const Button = ({backgroundColor}) => {
  return (
    <button className={buttonStyle}>button<button/>
  )
}

button.css.ts:

import { style } from '@vanilla-extract/css';
export const buttonStyle = style({
    width: '100%',
    backgroundColor: ?
});

I tried to write it this way, but it didn't solve the problem.

button.tsx:

import {buttonStyle} from './buttuon.css.ts'
const Button = ({backgroundColor}) => {
  return (
    <button className={buttonStyle(backgroundColor)}>button<button/>
  )
}

button.css.ts:

import { style } from '@vanilla-extract/css';
export const buttonStyle = (backgroundColor) => style({
    width: '100%',
    backgroundColor: backgroundColor
});

error info: storybook: You can only export plain objects, arrays, strings, numbers and null/undefined.null/undefined. storybook: Plugin: vanilla-extract

• storybook
• vanilla-extract

Share Improve this question Follow asked Jan 18 at 10:26 ShawkryShawkry 1111 silver badge11 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

In order to dynamically style a HTML element background color using vanilla-extract, you'll need to use its built-in mechanism for creating dynamic styles, such as createVar and vars. import if from @vanilla-extract/css.

Refer the code below for reference:

import { style, createVar } from '@vanilla-extract/css';

export const backgroundColorVar = createVar(); // Create varible to hold background color

export const buttonStyle = style({
  width: '100%',
  backgroundColor: backgroundColorVar, // Set value here
});

In your button.tsx refer it like below:

import {buttonStyle, backgroundColorVar} from './button.css';

<button className = {buttonStyle} style = {{ [backgroundColorVar]: backgroundColor}}> Button </button>

本文标签：