PICKZEN
  • FAQ
  • Security in Pickzen
  • Builder
    • Builder Overview
    • Questions
      • Types and layouts
      • Display settings
      • Styling the text
      • Slide settings
      • Admin names
      • Slide help
      • Feedback slide
      • End slide
        • Number of outcomes
        • Forget results
        • Automatic redirect
        • Recommending content
      • Skip Logic
        • Branching controlled by slides
        • Branching controlled by tree
    • Products
      • Selecting products
      • Managing products
    • Linking
      • Linking choices to products
    • Install
      • Notification
      • Link
      • Button
      • Embedded
    • Lead Generation
      • Lead capture before recommendation
      • Receiving leads by e-mail
      • Sending e-mails to new leads
        • Adding customized data to e-mails
    • Advanced
      • Product attributes
      • Features table
        • Features from linking
        • Features from attributes
        • Smart texts
      • Insertable texts
        • User answers
        • Response based texts
      • Slots
  • Analytics
    • A/B Tests
      • Launching an A/B Test
      • Reviewing A/B test results
    • Insight panel
      • Overview
      • Responses
      • Leads
    • Parameters tracking
    • Sales tracking
  • Integrations
    • Your website
      • Pickzen Code
        • Installing the Pickzen Code in Shopify
        • Installing the Pickzen Code on any website
      • Add to cart
      • Add all to cart
    • MailChimp
    • Klaviyo
    • HubSpot
    • Zapier
    • Recharge
      • Recharge v1
      • Recharge v2
    • Product Feeds
    • Google Analytics
    • Facebook
  • Guides
    • Facebook/Instagram retargeting
    • HubSpot guide
    • MailChimp guide
    • Klaviyo guide
    • No-Code
      • Builder
        • Aliases
        • Tables
          • Executable tables
          • Data tables
          • Cell types
        • Settings
        • Simulation
      • Functions
        • ADDTO
        • CONCAT
        • EMPTY
        • EVALTABLE
        • EXTRACT
        • FIRST
        • FLAT
        • LOG
        • NTH
        • PERSONALITY
        • PRESCRIBE
        • PRESCRIBESLOTS
        • PROPERTY
        • RANK
        • RECIDS
        • RECGROUP
        • RECSKUS
        • REFINE
        • REMOVEFROM
        • SECOND
        • SLOTS
        • SPLIT
        • TABLEVALUE
        • TRUNC
      • Tutorials
        • Prescription Rules + Taglines
        • Calculator
  • Design System
    • Enabling the DS
    • The builder
      • Preview panel
      • Components panel
      • Properties panel
    • Properties
    • Variants
    • Properties values
      • Parametrization
      • References
      • Deferred actions
    • Components
      • [Base]
      • Button
      • Collapsable
      • Container
      • CoverSlide
      • Deck
      • Dropdown
      • EndFormSlide
      • EndSlide
      • FeedbackSlide
      • FormMapper
      • FormSlide
      • Grid
      • HTML
      • Icon
      • Image
      • InputDate
      • InputNumber
      • InputText
      • Label
      • Link
      • Product
      • ProgressBar
      • QuestionSlide
      • Repeater
      • Separator
      • SlideRenderer
      • Specs
      • TextArea
    • Views
    • Editor settings
    • Accesibility
    • Interceptors
    • HowTo
      • Show a variant programmatically
      • Use CSS in custom component
  • Administration
    • Managing accounts
      • Inviting collaborators
      • Requesting access
    • Copying pickzens between accounts
    • Replacing pickzens
    • Recovering versions
  • Developers
    • Developers panel
      • CSS customization
      • JavaScript customization
    • JavaScript API
      • Hooks
      • HOWTOs
        • How to add results
        • How to get the answers
        • How to decorate products
        • Escaping the iframe
    • REST API
      • API rate limit
      • Assistants resource
      • Responses resource
    • SDK
      • Documentation
        • Engine
        • Slide
        • CoverSlide
        • QuestionSlide
          • QuestionOption
        • FeedbackSlide
        • FormSlide
          • FormField
            • SelectorField
            • SelectorFieldOption
            • ImageField
        • EndSlide
          • Result
      • HOWTOs
        • Populate custom dropdown
Powered by GitBook
On this page
  1. Design System
  2. HowTo

Use CSS in custom component

When you create a custom component, you can define the CSS of your component in a CSS file or inline. If you use an external file double-check you use prefixed classes, otherwise, it can create conflicts if the component is rendered in the hosting page without an iFrame.

If your component defines properties that need to be used in the CSS file, you can use CSS variables. For example, say your component defines a color property. It can be set this way:

<div className={`my-component ${props.classes}`} 
     style={ {...style, '--color':props.color} }>
</div>

In the CSS file it can be referenced this way:

.my-component {
  background-color: var(--color)
}

PreviousShow a variant programmaticallyNextManaging accounts

Last updated 3 years ago