How can I import the content of .scss file as a CSS string in Next.js?
I need something like this:
// scss file
.bg-red {
background-color: red;
}
Use the content as variable:
let styleString =
.bg-red {
background-color: red;
}
And inject it to iframe (I'm using react-frame-component library)
<Frame head={
<style>{styleString}</style>
}>
</Frame>
I need something like this but for scss instead of styled-components:
Styled components are not rendering in React Iframe?
I think this might be what I'm looking for, but don't want to modify webpack config as much as possible.
https://www.npmjs.com/package/sass-to-string
Related
I am trying to generate static html from react using renderToStaticMarkup method. The problem I am facing right now is that I am not able to import css into react component. I want to import css in my React components like css-modules (import styles from './style.css'). And then inject that loaded css into generated static html head. How can I accomplish that?
P.S. I can't use webpack due to some constraints. If there is any babel plugin availabe for this specific case, then please let me know.
Here is how I am generating static html from react component:
const reactElement = require('react').createElement;
const ReactDomServer = require('react-dom/server');
const renderHTML = Component => {
return ReactDomServer.renderToString(reactElement(Component))
}
You can pass a URL in as a prop and render a <link/> tag. Made an example here, not sure if that would meet your needs or if you need it to be a style tag.
This may be challenging without a lot of custom logic.
If you want to inline the CSS only for the initial render and then fetch the rest after the initial render, styled-components may be a better option because it supports exactly what you're trying to achieve without too much configuration: https://www.styled-components.com/docs/advanced#server-side-rendering
May be I am too late you can also create It like this way.
React.createElement("style", {},[ "body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}" ])
Output:
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
Since createElement take 3 params and last one is children we can put our vanila css inside it as a children. You can put any imported file in the form of string and it will convert to style tag
I have a React app that's loaded into a parent document via some shim JavaScript that:
creates an <iframe> element
creates a <div>
injects a <style> tag into the <head> in order to style the inserted <div>
Roughly, this works using the below:
// example.jsx
// Require the css using css-loader
const styles = require('../styles/example.css');
// Find the parent document
const doc = window.parent.document;
// Inject our stylesheet for the widget into the parent document's
// HEAD as a style tag
const css = styles.toString();
const style = doc.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
// This is required for IE8 and below.
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
doc.head.appendChild(style);
This uses css-loader in our Webpack config in order to have the require().toString() work for setting the cssText dynamically.
While this works, I don't know if this ideal. And we'd prefer to write Sass and get the benefits of #import to bring in other CSS (like resets), and get the benefits other tooling for Sass.
Is there a better way that we can achieve the same result of injecting <style> text into this parent document without sacrificing our ability to use the tooling we prefer?
Install react-helmet and then try this in your react component:
<Helmet>
<style>
// Insert CSS string here
</style>
</Helmet>
The other option is to load the sass directly in the parent but gate all of its styling behind a sass function that checks if #react-root exists.
I'm having a problem with overwriting CSS styles using composing in modules.
My current setup:
I have a thirdparty grid library file which I insert into my application in the entry JS file:
import './css/thirdparty/file.css';
I'm also using CSS modules for my components like this:
import styles from './component.module.css';
const Component = () => {
// component code omitted
// in render
<div className={styles.col14}></div>
In webpack config, I have two rules setup to load the file.css using plain css-loader and the *.module.css files using css-loader with modules.
All of these files are loaded correctly and the styles are all present. Here's the problem:
file.css contains:
.col-1-4 /* and all other col-1-* variations*/ {
float: left;
min-height: 1px;
padding-right: 20px;
}
.col-1-4 {
width: 25%;
}
component.module.css contains:
.col14 {
composes: col-1-4 from global;
padding-right: 0;
}
Current output of the component:
<div class="col14__3bA8W col-1-4">
So the style is supposedly overwritten, but what I see in the browser is that the padding-right is still 20px. It seems to only happen when I try to compose from a global style, because if I compose two classes from the same component CSS file, it works as expected.
Does anyone know why this is not working?
You can try with
.col14 {
composes: col-1-4 from global;
padding-right: 0!important;
}
Say I have a styled component, in index.jsx
import './index.less';
class Input extends React.Component {
...
}
and my index.less files looks:
.input{
color: #whiteColor;
}
This index.less has to work with the mixin.less that imported in the root project.
So my question is, even though I imported the mixin.less, it prompts variable #whiteColor not found. Any idea to solve this?
I have felt the same pain, why isn't my styled component resolving less variables?
The syntax is simple JavaScript, just do:
.input{
color: ${props => props.whiteColor};
// or
color: ${props => props.theme.whiteColor};
}
But, at my company, we had thousands of less components, and we really thought that the less syntax was cleaner and definitely faster to write. We developed Styless.
It is a babel plugin that parses less and generates javascript code. Add it to your .babelrc file.
{
"plugins": ["babel-plugin-styless"]
}
Then, we can do!!
const Input = styled.input`
#highlight: blue; // can be overwritten by theme or props
background: darken(#highlight, 5%); // make green darken by 5%
`;
Check here to see how to use the theme provider and load variable from your index.less!
You can try import the mixin.less in index.less
I have been trying the same than you.
But then I thought.. it is that what I really want? Because styled-components propose a different approach to having a modular structure for your styles.
https://www.styled-components.com/docs/advanced Check theming, is amazing powerful.
Because in styled components you define the variables with javascript.
And if you want color manipulation like less, sass, you can check https://github.com/erikras/styled-components-theme
Its like forgetting about less, and sass and moving it to a new style modules.
Still, if you want to keep your defined style classes, you can do that:
class MyComponent extends React.Component {
render() {
// Attach the passed-in className to the DOM node
return <div className={`some-global-class ${this.props.className}`} />;
}
}
Check the existing CSS usage from docs:
https://www.styled-components.com/docs/advanced#existing-css
I am new to React here and I am trying to apply CSS to a Modal dialog.
I've created a css file: /css/mycss.css
/css/mycss.css
.test {
width: 90%;
color: red;
}
At the root level, I have my modal dialog JSX file:
MyModal.jsx
//more code above
<Modal
{...this.props}
show={this.state.show}
onHide={this.hideModal}
dialogClassName="test"
>
//more code below
As I understand it, I'm supposed to use the dialogClassName prop to apply CSS to the modal dialog. I'm trying to access the class selector in my CSS file and pass it into the prop as shown.
Do I have to import the CSS?
import test from '/css/mycss.css';
That didn't work. What do I do to get the CSS to show?
Edit:
I've tried
import styles from './css/mycss.css'; // dialogClassName='styles.test';
import { test } from './css/mycss.css'; // dialogClassName='test';
import .test from './css/mycss.css'; // dialogClassName='test';
import {.test} from './css/mycss.css'; // dialogClassName='.test';
import './css/mycss.css'; // dialogClassName='test';
None of that applies the CSS.
Edit 2:
I tried import styles from './css/mycss.css' again and then did dialogClassName = {styles.test};. That actually worked...but sort of. The text colors did change to red but the width of the Modal dialog is still pretty stagnant. It is not 90% of the screen or 10% of the screen no matter what I change the width attribute to. So first, why was the tutorial I was following telling me to pass a string to dialogClassName? And how do I get the width of the modal dialog to change?
You said that you are using webpack. If you don't have installed css loader.
npm install css-loader --save-dev
Now you can import your partial CSS files in React components. This example is when you have CSS files in the same direction as a js file.
import componentStyle from './componentStyle.scss';
There are more way how to import css files. This I use because you can go inside the file like this: className={componentStyle.classInside}.
Webpack example:
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
};
Also, you can use SASS, LESS, etc. in the same way.
Try import './css/mycss.css';
Path should be relative to the file.
In .js file
import classes from './style.css';
dialogClassName= {classes.myModalStyle} as Modal attribute
In style.css
.myModalStyle{
width: 90%,
max-width: none!important;
}
Note: max-width: none!important is the most important part. Without it, resizing the width won't work