I have a several React projects where I import some UI-components from a private NPM-package.
This UI-components package is also built using React and styled with Tailwind 3.
The projects where I import the UI-components is using Tailwind 2 and Rollup. I have the abillity to change most of this if it would help.
The CSS of this UI-components package is imported in my projects index.ts file.
(I have access to this NPM package and can change to code there as well)
One of these components is a wrapper-component. That takes in a prop called classes.
import { Wrapper } from 'our-ui-package/components/wrapper';
<Wrapper classes="pt-[30px]">
<Some-children-here />
</Wrapper>
Here I want to be able to send inn Tailwind-classes like pt-3 or even better: send in arbitrary values like pt-[30px].
Now this does not work, as the CSS for the UI-component is created when the NPM-package is build.
Is there any way I can combine the CSS from the UI-components package, as well as add any extra CSS I want to generate by sending these props to the wrapper (or any other component I make that accepts classes as props)?
Appreciate any help. Thank you so much.
Summary:
Importing components that are styled with Tailwind from a NPM-package, and send inn extra Tailwind-classes as props to said compontents, hoping the styling would update.
This does not happen, as the CSS is generated in the NPM-package is already generated when the package is built.
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'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?
I am trying to use Saasland template into gatsby. I am new to gatsby and new to graphql as well.
layout.js
import 'bootstrap/dist/css/bootstrap.min.css'
import "./layout.module.css"
layout.module.css has all the style classes from Saasland template. For images the css has:
background: url("../images/home5/shap_tecture.png")
I am already facing an issue with loading these images on a component (page).
From my previous question, I was told to follow https://www.gatsbyjs.org/docs/working-with-images/ to deal with images.
So, How can I use GraphQL for images that are referenced in css as shown above ? Do I need to write a query for each image ?
I am working on react based nextjs app. Some npm packages are using external css import.
I am getting error like
Module parse failed, you may need an appropriate loader to handle this file type.
How can I support css import from external packages in my nextjs app. I have checked somewhere by making change in next.config.js, it works. But I am unable to find the proper one.It would be great if someone can help me around this.
For Global CSS
To add global css, inside the file pages/_app.js use import '../styles.css' or to import from node_modules, use something similar to import 'bootstrap/dist/css/bootstrap.css'
For Component Level CSS
Next.js supports CSS Modules using the [name].module.css file naming convention.
CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same CSS class name in different files without worrying about collisions.
If you have a component called Button inside Button.js, create a file called Button.module.css for the css file. Then you can import it to the Button component by import styles from './Button.module.css'
Documentation
Old Answer
You can add the css file in head of nextjs.
import Head from 'next/head'
and in the render method, inside the return add a head tag similar to ordinary HTML, the head tag should be inside a div.
<div>
<Head>
<title>Test</title>
<link href="/static/master.css" rel="stylesheet" key="test"/>
</Head>
</div>
also the css should be in static folder. Add a key to the link tag to reuse the css in multiple pages. If the key is same across pages, then the next server won't reload the css, but instead will reuse the css file.
This way there is no need for any css packages either.
You first need to create a next.config.js file in root directory
Install next-css
npm i #zeit/next-css
in next.config.js
const withCSS = require('#zeit/next-css')
module.exports = withCSS()
Restart app
USAGE
import 'react-select/dist/react-select.css'
No need for dangerouslySetInnerHTML
import your external css file into the component. For example, react-select requires you to add their stylesheet in order to make its styles work. You can import their stylesheets using
import rsStyles from 'react-select/dist/react-select.css'
Inject style in your component using dangerouslySetInnerHTML at render method
render() {
return (
<div>
<style dangerouslySetInnerHTML={{ __html: rsStyles }} />
// rest of your component code
// where you can use the injected styles
</div>
);
}
inside _app.js you can do the following:
if (someCondition){
import('../styles/rtl.css');
}