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
I have a set of semantic color classes in SCSS, which should be applied to components based on their props. I'm using React + Next.js + css-modules.
What I Want:
The current code I wrote below works correctly, but I want a simpler approach... declaring a bunch of classNames for every component to #extend something else is overkill! I want to write the extension directly in jsx part. Is there a better (more dynamic) way to do this? maybe inline extends?
Not a valid code, but I'm looking for something like this:
export default function Component({ status }) {
return (
<div style={#extend %{status}}>
...
</div>
)
}
Code
This is the semantics file. I import it inside other scss files to extend the classes:
/* _semantics.scss */
%warning {
background: orange;
color: red;
}
%error {
background: red;
color: black;
}
...
Example Component
/* component.module.scss */
#use "semantics" as *;
.warning {
#extend %warning;
}
.error {
#extend %error;
}
.success {
#extend %success;
}
// component.jsx
import css from "./component.module.scss"
export default function Component({ status }) {
return (
<div className={css[status]}>
...
</div>
)
}
// index.jsx
<Component status="warning">...</Component>
Notes
I am looking for an alternative way, so:
Using a package is fine
Using #include (mixins) instead of #extend is fine
Using .semantic-class instead of %semantic-class is fine
you can use global css to achieve this purpose
Following the installation guide in projectstorm/react-diagrams docs, I have trouble with the diagram not rendering properly. Inspecting the page reveals the positions of the nodes - but they are invisible. Using sass, I have imported into app.scss
#import "~storm-react-diagrams/src/sass/main";
I have also tried using the raw minified css with no improvement.
I still assume this is an error on my end, possibly I create the engine in the wrong place? I have a engineReducer to provide the default engine.
import * as SRD from "storm-react-diagrams";
//1) setup the diagram engine
var engine = new SRD.DiagramEngine();
engine.installDefaultFactories();
//2) setup the diagram model
var model = new SRD.DiagramModel();
//3-A) create a default node
var node1 = new SRD.DefaultNodeModel("Node 1", "rgb(0,192,255)");
let port1 = node1.addOutPort("Out");
node1.setPosition(100, 100);
//3-B) create another default node
var node2 = new SRD.DefaultNodeModel("Node 2", "rgb(192,255,0)");
let port2 = node2.addInPort("In");
node2.setPosition(400, 100);
// link the ports
let link1 = port1.link(port2);
link1.addLabel("Hello World!");
//4) add the models to the root graph
model.addAll(node1, node2, link1);
//5) load model into engine
engine.setDiagramModel(model);
const initialEngine = engine;
export default function (state = engine, action) {
return state;
}
Then, my main component looks like this:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import * as SRD from "storm-react-diagrams"
import {connect} from 'react-redux';
class Main extends Component {
render() {
console.log(this.props.engine); // Looks good!
return (
<div className="app">
<SRD.DiagramWidget className="srd-demo-canvas" diagramEngine={this.props.engine} />
</div>
);
}
}
function mapStateToProps(state) {
return { engine: state.engine };
}
export default connect(mapStateToProps)(Main)
Quite honestly I dont understand the docs reference to
In your library code
that is, where should I initialize the engine? What else am I missing?
You need to set a explicit height for the widget. Something like:
.srd-demo-canvas {
height: 100vh;
}
.srd-demo-canvas {
height: 100vh;
background-color: rgb(60,60,60)
}
Setting the background-color in addition to the height helped me see the links against the white background that Chrome gave me by default.
If you want the grid that the demos show, then install sass and:
.srd-demo-canvas{
height: 100%;
min-height: 300px;
background-color: rgb(60,60,60) !important;
$color: rgba(white, .05);
background-image:
linear-gradient(0deg,
transparent 24%,
$color 25%,
$color 26%,
transparent 27%,
transparent 74%,
$color 75%,
$color 76%,
transparent 77%,
transparent),
linear-gradient(90deg,
transparent 24%,
$color 25%,
$color 26%,
transparent 27%,
transparent 74%,
$color 75%,
$color 76%,
transparent 77%,
transparent);
background-size:50px 50px;
.pointui{
fill: rgba(white,0.5);
}
}
I tried following the suggested fixes but nothing worked for me.
Here's what really fixed the issue for both the nodes and the elements not showing properly.
I removed the importing of the storm-react-diagrams/dist/style.min.css
and instead, I created a custom CSS file which is the above file with the following modifications (You can find it under "node_modules/storm-react-diagrams/dist/" style.min.css):
.srd-diagram{position:unset;flex-grow:1;display:flex;cursor:move;overflow:visible}
(position to unset and overflow to visible)
.srd-link-layer{position:unset; ...}
(position to unset)
In general , the wrapper element (div for example) should have those css properties.
display:grid;
height: 100vh;
min-height: 100%;
width: 100vw;
Hello guys I have decided to start my own flowchart open project with ReactJs, but if you need, you can adapt it to pure javascript, please feel free to contribute.
https://github.com/lmoraobando/lmDiagram
I'm using mdDataTable to display data retrieved form Server. Is there a possibility to change the css class of mdt-row? If I try to add a class, mdDatatable overwrites it
in your own css file, you can override the css by explicitly targetting the angular md classes, like this:
.mdt-row {
{overridesettingname}: {newsetting};
}
But I'd be careful because that overrides site-wide. You can override just a single page by targeting a parent element on the page, like:
.{mypageclassname} .mdt-row {
{overridesettingname}: {newsetting};
}
Another note, make sure YOUR css file is loaded AFTER the angular css file(s).
You can explore the classes and ids for the element in the developer tool, It is easy to add style for all elements, Here I've added sample styles you can keep added as you wish. Hope it helps.
.mat-table {
overflow: auto;
max-height: 700px;
}
.mat-header-cell .mat-sort-header-sorted {
color: #0A0A0A;
}
md-pagination-wrapper {
width:auto !important;
}
md-row:nth-child(even){
background-color:#EDF1F5;
}
md-row:nth-child(odd){
background-color:#FDFDFB;
}
Using CSS Modules, how can I apply a global utility class to multiple elements without duplicating the style declaration?
For example, here is a React component without CSS Modules. The relevant line is the div with two classes: widget and clearfix...
/* components/widget.jsx */
class Widget extends Component {
render() {
return (
<div className="widget clearfix">
<div className="widget-alpha">Alpha</div>
<div className="widget-beta">Beta</div>
</div>
);
}
}
.clearfix is a global utility class that I want to apply to many elements throughout my app:
/* util/clearfix.scss */
.clearfix {
&:before, &:after { content: " "; display: table; }
&:after { clear: both; }
}
I've seen various ways of importing .clearfix into a CSS Module, but in each case the style declarations are redefined for each occurrence where the class is applied. Here's one example:
/* widget.scss */
.widget {
// other styles
composes: clearfix from '../util/clearfix.scss';
}
Through trial and error, I found that you can declare :global in the selector where the utility class is employed (not where it's defined):
.widget {
// other styles
:global {
composes: clearfix;
}
}
To avoid messy and repetitive import and from statements, I used an index.scss file to import the utility files and then import that in any partial where a utility class is needed.