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?
Related
In react I have found either inline CSS styling OR separate CSS style sheets and CSS modules etc to import into the component . Is there no way in react of creating an internal tag ie internal styles specific to the component, say on top of the component like we do in HTML
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?
I'm developing a component library in React using Styled Components and Rollup as a bundler. Also, I'm using Storybook.
Now I want to add the Open Sans font from Google Fonts. I know how to do this when developing a standard React project, but I'm not sure how to do this when developing a component library.
What I tried/ways I know of:
Adding the link to the head of the HTML document (I don't have an HTML document since I'm developing a component library)
Creating a GlobalStyles object using Styled Components and inserting an #font-face there (I don't think this is possible since the GlobalStyles object needs to be inserted in the JSX of the index.ts file which I don't have)
Does anyone know how I should handle this?
I have created a react typescript project using "create-react-library".
The project export a component, let's call it "A".
The "A" component render an svg image which is inside the component folder.
But when i compile the library project (using microbundle), there is no assets in dist folder.
And as a result, if i use component "A" in a test example project, i cannot see the svg image.
I have not found any example which handle this scenario.
I am pretty new to Gatsby Js, I am quite struggling to understand how I can change my Header component styling based the current path. The Header component is common to all the pages but the styling should change slightly when I navigate to other pages like /portfolio and /team. Due to Gatsby SSR in production on the first page load when the path is "/portfolio or "team" the proper styling for the header doesn't change since the code to modify the className of the header component happens in the browser. Is there any way using the Browser API or SSR API to add/remove the correct className of the Header component? I hope I made it clear enough.
Actually its easy. Gatsby comes with a handy plugin called react-helmet make sure you have it inside your package.json if you don't, check the Docs for installation.
All you need to do is to import helmet inside your targeted page for example portfolio.js
import { Helmet } from 'react-helmet'
After your <SEO> component, add Helmet component and define a CSS class within bodyAttributes element like so:
<Helmet bodyAttributes={{ class: 'portfolio-page' }} />
This will add portfolio-page class to the page body tag, and so, you can target that class like you would with regular CSS classes.
.portfolio-page .your-navigation {
background-color: black;
}
Here is a codeSandbox for live example. Check page-2.js and components > layout.css