I want to use the tailwind theme in my react component. For this purposes i made this:
import theme from "tailwindcss/defaultTheme";
console.log(theme)
Also, i created the tailwind.config.js file where i added new changes to the theme.
Doing this i encountered an issue, because the values from console.log(theme) are default tailwind values even if i overrode them. How to get the updated values from tailwind theme?
Related
I'm building a React Component Library that uses Rollup and TailwindCSS for styling and each component has a default style based on set color variables in the tailwind.config.js file. I want to be able to consume this library in another project and then override the TailwindCSS color variables used in the component library to change the theme without adding a className prop to every single component.
Is it possible to override the color variables in my component library to enable this functionality?
I've attempted to just create duplicate entries in my consumer project's tailwind.config.js with the same variable names but using different hex values and it still just seems to compile with colors from the library.
How can I use plane Css in mui V5 components. I want to call a css classes to mui components and modify the mui styles. I don't want to use styled. Only using a plane Css.
Iam using react typescript and mui v5
Example: I have a mui Button component and want to specify className="editbutton" and the css properties for this class is in css file
sample
And in css file
. editbutton { color:'red'; background-color:'green'}
How do I achieve this, what are the changes that needs to be done in any of the files and what are the things that needs to added
Is it possible to have different CSS for Different React components.Currently am Using import "./css/name.css" to import local CSS but this same CSS is also being applied on another component even when i don't import this CSS for other Component.
If you want to use seperate css for every component you can create react app module.css feature
css module will help, or alternatively you can install styled-component via npm
Storybook applies default styles to the the story canvas iframe. This prevents my stories from looking the way they should. How can I get rid of Storybook's default styles?
For example, here is the default style for an h2 element (via Storybook's page.css):
The source of that page.css is webpack://src/stories/page.css.
If I add styles in preview-head.html, Storybook will apply my custom styles AND the default Storybook styles, with the default Storybook styles taking precedence (unless my custom style has a strong specificity).
By default when installing Storybook via npx sb init for React, Storybook adds a Page.tsx (.js) file under src/stories. In that file they import './page.css'; simply remove that import and you'll be set.
Hope this is your fix... It may be different depending on what framework you're using.
Don't use MDX Syntax.
I had same issue and it was because I was using MDX Syntax.
When I started using the export syntax it didn't apply any built-in CSS classes.
I'm building a component library alongside a Gatsby demo website. The component library is styled with Emotion + theming.
Here is the basic folder structure I have:
src
components
button.js
website
src
components
layout.js
pages
index.js
My problem is that the button doesn't get the theme (the theme appears to be {}).
However, if I move the button to website/src/components, the theme gets to the button as expected.
See repro here.
What am I missing here?