I have a Sidebar component written with Lit Element that includes many SidebarSection subcomponents to render different sections of the sidebar, and I'm trying to write a story with Storybook as shown in this page: Stories for multiple components, but the doc does not exist yet for Web Components and I can only find React code. I'm trying to adapt to make it work with Lit but no solution has been found.
Related
If you use Chakra UI alongside Storybook, it automatically populates examples of all the different Chakra components, shown in the image. But is there a way to view the code that produces these examples, as it would be helpful when making them? I tried looking in the packages but couldn't find where they are located.
You can find the code in their GitHub repo. For example, the Layout component is in https://github.com/chakra-ui/chakra-ui/tree/main/packages/layout
Just recently I have begun working with React, and to some extent front-end development. I am using the Material UI framework to develop an application, and I have chosen to use its "styling with JavaScript" approach: styles are defined as JavaScript objects, rather than traditional CSS, for example. All good so far.
I have my components in a component directory, and in a separate directory called style I have a matching file for each component where I define the useStyle hook (per component). That way, each component's style is defined via a unique import.
Now that I am integrating a non-Material UI third party library, the styling it ships with is defined with CSS, so I can just import the CSS file in my React component file to use the styling. But now I end up with a mixture of styling techniques.
Is there a single, consistent, and recommended approach for styling React applications? Is using multiple styling techniques recommended?
We have recently switched to a React SPA site. From the old site, we have some documents (invoices, quotes) that we generate as HTML files that we then print as PDFs. These templates are designed by a third party and have their own separate CSS files that have nothing to do with our React SPA's CSS. After the shift to React, I added some of the templates as React-friendly modules and converted their CSS to JSS. It worked but only partially as a lot of styles are overridden by the React SPA's CSS so the results are not consistent. We don't have the resources to redo all templates from scratch and this isn't something that we should be doing anyway - ideally, we want to be able to just load in the CSS that we get from the designer and only play around with the HTML/JSX (happy to use a tool to convert CSS to JSS but no custom editing). Is there a way to somehow ignore/unload all app CSS when loading a specific page, and only use a specific CSS/JSS file (in our case makeStyles), then bring it back to normal when another page is viewed?
I am trying to pull out all of the common styles used throughout an application and storing them in a stylesheet and material ui theme file - this way I can update the base styling of all input fields for example in one place.
I am using the react-select element in a component as a dropdown for a country code picker, although I cannot seem to use material ui's useStyle/makeStyles feature to call the theme's styling within the custom react-select's styling block.
Does anyone have any idea of how to use mui theme elements within the react-selects custom styling block?
As I become more familiar with Angular, and the vast number of modules out there for making an application really shine, I am also becoming overwhelmed at understanding the basic logic of CSS overloading, and how to manage the imports to get the desired behavior.
For instance, I have pulled the following libraries into my Angular application; Boostrap, Bootcards, boostrap-select, font-awesome, and some custom bootstrap-wizard libraries for a modal tab-based wizard.
All of these libraries require being defined in the index.html page of my Angular app (both the CSS files the JS files). How do you manage the desired behaviors so that one components styles don't override another components styles? What are the best practices around bringing in multiple components and using them in an Angular app, without negatively affecting the applications previous behaviors?
You have 3 choices:
Place more important CSS files AFTER less important ones so the more important override when both have same attribute names.
Manually go in stylesheet and change attribute names.
Instead of including the stylesheet in index, include it in your html file