Book of Tales displaying Emotion Styling upon initial load only

I'm currently working with the styled api provided by emotion in order to create a custom styled button.

const StyledButton = styled(Button)`
  background-color: ${theme.palette.grey['800']};
  width: 50;
  height: 50;
  &:hover {
    background-color: ${theme.palette.grey['600']};
  }
  & .MuiButton-label {
    color: #fff;
  }
`;

However, I am encountering an issue when showcasing this in Storybook as the styling only shows up on the initial render of the component.

Subsequently, when switching between components, the applied styling vanishes (both from computed properties and visual display).

The styling comes back into view once I refresh the page... Any suggestions on how to tackle this?

csstypescriptmaterial-uistorybook

Answer №1

As I was crafting the question, a light bulb went off in my head and I stumbled upon the solution :P... Turns out there's an interesting note from MaterialUI regarding injection priority, prompting me to create a personalized decorator

export const withInjection = (story) => (
  <StylesProvider injectFirst>
    { story() }
  </StylesProvider>
)

that I then integrated into my preview.ts

// implementing style priority injection
addDecorator(withInjection);

and lo and behold, everything is now operating smoothly :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for transforming a container div into a content slider

Working with Bootstrap 3, a custom div has been created as shown below: <div class="second-para"> <div class="container"> <div class="second-section"> <div class="c ...

javascriptcsstwitter-bootstraptwitter-bootstrap-3

Successive type label

Looking to create an object that can have either primitives or objects as properties? Avoid pitfalls like the following: const obj: DesiredType = { correctProp1: 'string', correctProp2: 123, correctProp3: true, wrongProp4: [1, 2, 3], pr ...

typescript

Error message: "react-router typescript navigation version 0.13.3 - Unable to access 'router' property"

I'm currently in the process of porting an existing React project to TypeScript. Everything seems to be going smoothly, except for the Navigation mixin for react-router (version 0.13.3). I keep encountering an error message that says "Cannot read prop ...

typescriptreact-routerreactjstypescript1.6

Get rid of the drop-down shadow effect

Currently working on a website project for a client and looking to remove the blue "shadow" effect from the dropdown menus. I believe the code that needs editing is as shown below: .main_nav ul.sub-menu { position: absolute; top: 65px; width: ...

cssmenushadow

Using JQuery for sliding left without having to use inline CSS

I am dealing with a situation on my website where I need to hide a sidebar when clicked. $('#sidebar').toggle('slide', 'left', 300) In addition, I have implemented a CSS style to hide the sidebar on mobile devices. #sidebar ...

jquerycssmedia-queriesslidetoggle

Changing CSS styles dynamically using PHP

After stumbling upon a customizer live preview layout picker, I have finally found what I've been searching for – a live layout changer for WordPress. This solution works like a charm, but I'm wondering if there is a more efficient way to write ...

phpcsswordpress

Navigate the cursor beyond the span within the content that is editable

I am currently developing a tag input system for a template builder. My main focus right now is on assisting the editor in distinguishing between regular text and formatted text. I am structuring it similar to WordPress shortcodes, where a templated elemen ...

javascriptjqueryhtmlcss

Obtain data attributes using JQuery's click event handler

I'm facing an issue with a div structure setup as follows: <div class='bar'> <div class='contents'> <div class='element' data-big='join'>JOIN ME</div> <div class=& ...

javascriptjqueryhtmltypescriptcustom-data-attribute

Integrating Material-UI Dialog with Material-table in ReactJS: A Step-by-Step Guide

I have implemented the use of actions in my rows using Material-Table, but I am seeking a way for the action to open a dialog when clicked (Material-UI Dialogs). Is there a way to accomplish this within Material-Table? It seems like Material-UI just appen ...

javascriptwebmaterial-uimaterial-table

Unable to adjust font for headings using CSS and Bootstrap

Looking to expand my skills in HTML and CSS, I've encountered a bit of a hiccup. Utilizing Bootstrap for my webpage, here's the simplified version of what I have so far: index.html: <!DOCTYPE html> <html> <head> <lin ...

htmlcsstwitter-bootstrap

Enable the automatic hiding of the filter menu in MUI DataGrid when the enter key is

Is there a method to automatically close the filtering menu in MUI DataGrid when pressing the enter key? Currently, we have to click elsewhere to hide it. This issue pertains to: ...

reactjsmaterial-uidatagrid

Accessing Child Properties in Parent Component using Typescript

New to the world of Typescript! Imagine having a component called TitleSubtitle that consists of both a Title and a Subtitle component. The Title component comes with props: interface TitleProps { text: string; } The Subtitle component also has props ...

javascriptreactjstypescript

Ways to display a specific section on an HTML page using AngularJS

Main page content <div class="row"> <div class="col-md-3"> link 1 link 2 link 3 . . . </div> </div> <div class="col-md-9"> <div ng-view></div> </div& ...

javascripthtmlcssangularjs

What is the designated location for installing the MUI X Pro license key?

I recently purchased a license for MUI X for my next app. Where should I place the following code snippet to set the license information? Should it be in the same location as the component that uses it, potentially exposing the key to client browsers? im ...

material-uimui-x

How to use a self-hosted font in a custom Material-UI theme for ReactJS?

Currently, I am in the process of setting up my initial project utilizing Material-UI for ReactJS. My intention is to personalize the default theme by incorporating a custom font (from the server, not sourced from Google Fonts or anything similar). Despite ...

javascriptreactjsmaterial-ui

Utilizing a method from a separate class in Ionic 2

Having trouble using the takePicture() function from camera.ts in my home.ts. I keep getting an error message saying "No provider for CameraPage!" Any assistance on how to resolve this issue would be greatly appreciated, as I am new to this language and ju ...

angulartypescriptionic2

Confused on the steps to integrate a Radio group into an existing Formik form that is already designed with Material UI components

I'm relatively new to working with REACT and I've been experimenting by tweaking existing examples. Currently, I'm following a guide that involves Formik & Material UI components. My current task is to replace a text input box with a rad ...

reactjsmaterial-uiformikradio-groupformik-material-ui

Necessary Input Field in React Form Does Not Mandate Text Input

I'm having an issue with my subscription dialog form. Even though I have set the email field as required in the code, my form still allows submission with a blank email address. This could potentially cause significant problems for the client. It seem ...

reactjsformsmaterial-uirequired

Overflow: Truncating text with an ellipsis in the center

Seeking a CSS-only solution for adding an ellipsis in the middle of a string when it exceeds its container. I have tried splitting the container in half, trimming the first half with a wrapper on a whole letter and adding an ellipsis to the front of the s ...

htmlcssoverflowtrimellipsis

What is the best way to isolate the CSS of individual components in Angular 2?

For the first component: CSS-- ngx-dnd-container { color:black; background-color: white; } HTML- <ngx-dnd-container [model]="targetItemsA" dropZone="multiple-target-a" </ngx-dnd-container> For the sec ...

htmlcssangularangularjs-directiveangular-cli