I followed documentation of react-slick step by step.
I installed both react-slick and slick-carousel but whenever I import the css i always get this error Module not found: Can't resolve '~slick-carousel/slick/slick-theme.css'
also this error Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to src/pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules)
I'm using Reactjs with nextJS
Any suggestions please?
Related
Link to project picture
I am creating a project in react and needed bootstrap. But it is overriding my custom css. Some of default bootstrap changing my headings. I have tried everything like putting my css link below bootstrap and also importing it into my index.js file but nothing working. i have attached the picture of my project.
Try maybe using bootstrap as a dependency:
npm i bootstrap
and import in index.js:
import 'bootstrap/dist/css/bootstrap.min.css';
or even try a react-bootstrap dependency
npm i react-bootstrap
Bootstrap is written with !important rules, so they has the highest priority if given!
Maybe you can try inline css in React elements (although not recomended in a simple HTML)
All the best!
As you haven't added any codes example or link of your live project, please check if CSS file has been linked properly. Go to page source and click on styles.css. It should open all your codes inside CSS file. If you can't open this file, or there's nothing found, you should check CSS file linking once again.
But if you can see css file properly but still not working, as a final option, you can use "!important" in CSS class. It will work fine.
Install bootstrap as npm package using npm i bootstrap. Then place your styles.css in the src folder and import styles.css in your App.jsx.
import 'bootstrap/dist/css/bootstrap.min.css';
import './styles.css'
Or you can even try using !important. This will definitely work but you will need to to it every time you want to override a style.
As mentioned, bootstrap adds !important to seemingly everything. In order to remove all of them you'll need to install the npm package instead of linking to a CDN (like you're currently doing). So:
npm install bootstrap or yarn add bootstrap
Then create an app.scss (naming is arbitrary here) and add the following lines
$enable-important-utilities: false; //this disables !important
#import "../../node_modules/bootstrap/scss/bootstrap";
Then, import that app.scss file into your index.js file:
import './app.scss'
The next time your run npm start (or whatever command you're using) it should generate a new css file to use. You may need to install sass if your project isn't already using it. But, that's beyond the scope of this answer.
I have this line in one of my tsx file:
import styles from "../../styles/buyTicket.module.css";
got this error:
ERROR in /Applications/MAMP/htdocs/wp-content/plugins/tikex/tikexModule/components/BuyTicket/PricingOptionInvoiceItemsFormFieldsCheckboxes.tsx
./tikexModule/components/BuyTicket/PricingOptionInvoiceItemsFormFieldsCheckboxes.tsx 7:19-54
[tsl] ERROR in /Applications/MAMP/htdocs/wp-content/plugins/tikex/tikexModule/components/BuyTicket/PricingOptionInvoiceItemsFormFieldsCheckboxes.tsx(7,20)
TS2307: Cannot find module '../../styles/buyTicket.module.css' or its corresponding type declarations.
If I remove styles then I got this error no more, but then it will work not as a CSS module, and naming collosion will happen. What would you suggest?
As far as i can understand, you may have a look here:
Can't import CSS/SCSS modules. TypeScript says "Cannot Find Module"
and here:
React, Typescript - Cannot find module ... or its corresponding type declarations
This is a very specific question, but I am using the Chakra UI component library for React and I want to import my own custom css files, although it doesn't allow me to do this.
I don't know if this is a bug or if it is intended, but is there any way I can go around it?
Thanks.
Make sure that you import css files in right place. Try to import your css files into App.js or if be more specific into the file where you init ChakraProvider. This approach works fine for my project:
import { ChakraProvider } from '#chakra-ui/react';
import './yourCssFile.css';
You can extend or override a token in the default theme by importing the extendTheme function. You can override properties as well as add new ones.
But if you want to add an external CSS file, I've found out from reading the docs that in order to import other file types (.css, .woff or .svg) in your theme file, you'll need to move those imports out of the theme file.
I'm using a spreadsheet package called React-Datasheet installed with npm in my react.js project. The following instructions are found in the GitHub:
import ReactDataSheet from 'react-datasheet';
// Be sure to include styles at some point, probably during your bootstrapping
import 'react-datasheet/lib/react-datasheet.css';
When I compile the code the styling file does not compile with it. What is the method used to add the react-datasheet.css file?
The content currently renders like this:
How do I import the css file to result in a render that looks like this:
Just add this css in your index as what I found is it has further css
https://github.com/nadbm/react-datasheet/blob/master/docs/src/index.css
and add <div className={"sheet-container"}> class or div before rendering ReactDataSheet
I am using styled-components in a React project. So far it has been working fine, but now I want to use the react-datepicker package, which requires its styles to be imported the following way:
import "react-datepicker/dist/react-datepicker.css";
However, importing the file causes an error that says "You may need an appropriate loader to handle this file type". I know I could fix this by creating a handler for .css files, but I thought I could avoid that by using Styled Components.
My question is, is there a way to handle these type of imports with styled components? I've been loooking online for hours and can't seem to find a way.
I ended up just forking the project and changing it to use styled-components instead of needing to import the styles.