最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin1浏览0评论

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

Share Improve this question asked Jan 18 at 10:26 ShawkryShawkry 111 silver badge1 bronze badge
Add a comment  | 

1 Answer 1

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>

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论