How to convert nested stylus classes to Styled Components on a A12 Widget

Widgets
,
1

Hi,
I want to convert a pre-migration stylus class to a styled component.
Now, in my current case, the stylus class is nested:

.bar
  background-color $a12_green-dark
  :global
    .validation-bar__header
      .validation-bar__graphic
        background-color inherit
      .simple-pagination .button
        color inherit
      .button    
        color $a12_green-dark
        .button--icon .button--square
          background-color #fff
          border-radius 2px
          &:not(:disabled):hover
            background-color $a12_buttonInvertedBG

Now how would I convert it in proper Styled Components.

The style is currently incorporated in this Component:

<EditorBar
			barClassName={currentMessage.state === TaskState.resolved ? css.bar : undefined}
			showQuickAccessMenu={taskNode !== undefined}
			cause={taskNode}
			showPagination={true}
			currentPage={currentPage}
			onPaginationChanged={onPaginationChanged}
			pageCount={visibleMessages.length}
			renderSwitch={getSwitch}
			primaryTitle={getPrimaryTitle}
			renderSecondaryTitle={getBreadCrumb}
			variant={getVariant}
			renderContent={renderTaskContent}
		/>

The above component in turn renders the A12 ValidationBar Widget Component.
I wonder how I make EditorBar into a styled component with all styles applied. The mentioned styles are conditionally rendered when the TaskState is resolved, so thats the relevant part. After migration it does not work anymore, there is no change in style, when you toggle between “show/hide resolved”.

I haven’t been able to resolve this issue myself with the A12 migration instructions on themes, my css & styled components knowdledge is limited. This component would render a buggy tasklist, that’s why I am asking for help.

Thank you,
Veit

2

Hi,
If your idea is to change the button in validation bar base on certain condition, you can create a theme with different value for the button, and wrap the validation bar inside that theme when the condition is met.

const validationBar = <ValidationBar/>
return TaskState.resolved 
? <ThemeProvider theme={customTheme}>{validationBar}</ThemeProvider>
: validationBar;
3

Thank you, im still implementing, but this works :slight_smile:

4

Glad to hear that :smiley: