Styles not loading for custom widget in CMS
- Dominant language
- JavaScript
- Stars
- 19.4k
- Forks
- 3.1k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 9
Description
**Short description:**
I am using react/gatsby and netlify cms.
I am making a custom widget and the styles are not loading. My goal is to use css classes. The styles work as intended when the component is used on a page in the site but not when it is used in the CMS.
For example:
mywidget.css
``` css
.customStyle{
background:red
}
```
myWidget.js
```html
```
The above component will render the background red if I use the component on a normal page, like the home page of the site. However, the background is not red when I use the same component in the CMS.
**To reproduce:**
create a custom widget.
try and import any "test.css" file.
use css class like this:
```html
```
**Versions:**
all should be the most recent.
here are the dependencies in my package.json
``` json
"dependencies": {
"@mdx-js/mdx": "^1.6.22",
"@mdx-js/react": "^1.6.22",
"@reach/dialog": "^0.15.3",
"@reach/router": "^1.3.4",
"@reach/visually-hidden": "^0.15.2",
"@types/react-test-renderer": "^17.0.1",
"babel-jest": "^27.4.6",
"babel-preset-gatsby": "^2.4.0",
"draft-js": "^0.11.7",
"draft-js-custom-styles": "^2.1.1",
"draftjs-to-html": "^0.9.1",
"gatsby": "^3.11.0",
"gatsby-plugin-anchor-links": "^1.2.1",
"gatsby-plugin-catch-links": "^3.11.0",
"gatsby-plugin-gdpr-cookies": "^2.0.6",
"gatsby-plugin-html-attributes": "^1.0.5",
"gatsby-plugin-image": "^1.11.0",
"gatsby-plugin-manifest": "^3.11.0",
"gatsby-plugin-mdx": "^2.11.0",
"gatsby-plugin-netlify-cms": "^5.11.0",
"gatsby-plugin-react-helmet": "^4.11.0",
"gatsby-plugin-sharp": "^3.11.0",
"gatsby-plugin-sitemap": "^3.3.0",
"gatsby-plugin-theme-ui": "0.12.0",
"gatsby-plugin-web-font-loader": "^1.0.4",
"gatsby-source-filesystem": "^3.11.0",
"gatsby-transformer-remark": "^3.2.0",
"gatsby-transformer-sharp": "^3.11.0",
"gatsby-transformer-yaml": "^3.11.0",
"identity-obj-proxy": "^3.0.0",
"immutable": "^4.0.0",
"jest": "^27.4.7",
"netlify-cms-app": "^2.15.33",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-cookie-consent": "^6.2.3",
"react-dom": "^17.0.2",
"react-draft-wysiwyg": "^1.14.7",
"react-helmet": "^6.1.0",
"react-range-step-input": "^1.3.0",
"react-slick": "^0.28.1",
"react-test-renderer": "^17.0.2",
"showdown": "^1.9.1",
"smooth-scroll": "^16.1.3",
"theme-ui": "^0.12.1"
},
"devDependencies": {
"@babel/preset-typescript": "^7.16.7",
"eslint": "7.32.0",
"eslint-config-airbnb": "18.2.1",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-import": "2.23.3",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-prettier": "3.4.1",
"eslint-plugin-react": "7.23.2",
"prettier": "2.3.2"
},
```
**Additional context**
My custom widget works fine when I use style rather than className, but I need to use className in this context. And I didn't add the whole project and custom widget component because that is not the issue here, all of that functions properly. The issue is simply that css does not load into a component in netlify CMS
Contributor guide
Assessment
This issue has not been assessed yet.