I am using styled-components in a React project. When the components are rendered in the browser they are assigned a randomly generated classname, for example:
<div class="sc-KSdffgy oPwefl">
This class name does not help me identify from which component the <div> came from, so is there a way to do this easily?
P.s. currently I am adding attrs to my styled components so that I can recognise them in dev tools, for example:
const Foo = styled.div.attrs({
'data-id': 'foo'
})`
...
`;
That's exactly why we created our Babel plugin, when using it you'll get class names that include the name you gave your component:
<div class="Sidebar__Button-KSdffgy oPwefl">
On top of that we set the displayName of the generated component too, which means in your React DevTools you'll see the actual component name rather than just <div> or <Styled(Component)>.
To use the Babel plugin install it with npm install --save-dev babel-plugin-styled-components and then add it to your Babel configuration: (e.g. in your .babelrc)
plugins: ["styled-components"]
That's it! Happy debugging 😊
Note that if you're using create-react-app you cannot change the Babel configuration. I use and would recommend react-app-rewired to be able to change configurations without having to eject. We've also built react-app-rewire-styled-components which automatically integrates the styled-components Babel plugin for you!
For anyone using create-react-app, just substitute
import styled from "styled-components";
to
import styled from "styled-components/macro";
this will make your styled-component classes have the name of their component in them. And you'll be able to know which classes refer to which components just by looking at their class name ;)
For anyone using create-react-app, another option is to use the styled components babel macro
npm install --save babel-plugin-macros
Inside your component use import styled from 'styled-components/macro'; instead of import styled from 'styled-components';
You should now see the component name in your dev tools:
I was looking at doing the same and stumbled on the following as an alternative to attrs:
const Section = styled.div`
background-color: #06183d;
color: white;
padding: 16px;
margin-top: 16px;
${breakpoint("md")`
border-radius: 5px;
`}
`
Section.defaultProps = {
"data-id": "Section"
}
Use React.Component's defaultProps. It keeps the call to styled.div cleaner and should be easier to remove if needed.
Results in:
If you use ts-loader or awesome-typescript-loader there is typescript-plugin-styled-components.
Related
In our code base we use styled-components, with a theme. To use the theme one must do something like this
const StyledComp = styled.div`
margin: ${theme.spacing.sm};
`
However, because our theme is nested for organization purposes this can be quite verbose. So what we do is
const StyledComp = styled.div(({theme: { spacing, fontSize, etc }}) => `
margin: ${spacing.sm};
font-size: ${fontSize._14};
`);
I'm not sure where I picked up this pattern, but it really helps and we use it everywhere. However. prettier, and actually most styled-component vscode plugins don't seem to recognize it. That is they don't format the code inside or provide intellisense or whatever.
Is there anyway to fix this or could someone explain to me the issue so that I have more information for searching for a solution?
How do you import CSS into a ES6 module?
I receive the following error in browser console;
Failed to load module script: The server responded with a
non-JavaScript MIME type of "text/css". Strict MIME type checking is
enforced for module scripts per HTML spec.
Module below:
import { LitElement, html, css } from "lit-element";
import { MDCTextField } from "#material/textfield";
import style from "#material/textfield/dist/mdc.textfield.css";
export class MyWC extends LitElement {
static get styles() { return style; } //was using return css'...'
render() {
return html`
<label class="mdc-text-field mdc-text-field--textarea">
<textarea class="mdc-text-field__input" aria-labelledby="my-label-id" rows="8" cols="40" maxlength="140"></textarea>
...blah blah blah...
</label>
`;
}
#material/textfield & lit-element installed via npm OK. I'm using es-dev-server on linux.
ps - I want to use MDC web components but keep things as simple as possible.
Any help appreciated - Thanks.
The HTML spec currently only allows to import javascript modules. This is enforced by checking that the MIME type of the imported file is a javascript one, hence the error you're getting. The fact that in some environments (especially with bundlers/transpilers) importing other resource types is possible may give the wrong impression that it is case also in the browser.
To use this kind of import
import style from "#material/textfield/dist/mdc.textfield.css";
you would need some tool capable of transforming it into a CSSResult. A typical scenario is using bundlers like Rollup or Webpack with dedicated plugins/loaders (ie rollup-plugin-lit-css or lit-css-loader).
I want to, e.g, have require('foo/bar') be able to find myProjectRoot/src/foo/bar.
Webpack has resolve
Jest has moduleDirectories
Ordinary Node.js has app-module-path
I was hoping the latter would Just Work with React Native, but it Doesn't. Is it possible some other way?
Try to add this in the beginning of bar.js
/**
* #providesModule bar
*/
then simply using:
import Bar from 'bar';
I would like to keep my polymer components nicely encapsulated but right now if I try to import any external modules into the components I get an undefined error for 'import'.
I use Webpack to bundle up my app but this packs up my javascript files only.
Is there a way to do keep my Polymer component encapsulated into a single html file or I must separate the js part when it comes to imports?
Example:
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="my-new-view">
<template>
<style>
</style>
<h1>New view</h1>
</template>
<script>
import { myConstant } from '../module.js'; //<---- this throws error for the import'
Polymer({
is: 'my-new-view'
});
</script>
</dom-module>
Only Webpack
For it to work like that, you'd have to export module.js as a library so it can be used outside of Webpack. Once it's part of a library and included in the global scope you can then access it like
var myConstant = Module.myConstant;
Polymer({
is: 'my-new-view'
});
It's likely much easier to just have your JS code in a separate file.
See https://stackoverflow.com/a/34361312/4722305.
Crisper
One other option might be to run https://github.com/PolymerLabs/crisper over your code before calling into webpack. Crisper will remove the <script> tags from your code and convert them into JS files that will be compatible with Webpack.
It seems like VS and GTK are only needed to build node-canvas, which is required by konva.
Forgive me since I'm a complete newbie, but is there any other way of doing this without having to download and install a bunch of huge things that I'll never use for anything else? The whole process seems silly to me, since most browsers natively support HTML5 canvas these days.
You can use Konva in NodeJS environment. For that case node-canvas is required. So you have to install all dependencies for in.
Probably you do not need NodeJS. You can use browsers environments. For that case node-canvas is not required. DEMO
I found the answer, it's very simple that I missed it for a whole week!
Just do a npm install konva react-konva --save-dev, without installing node-canvas.
Before I imported konva at the start of my component file like this
import {Layer, Rect, Stage, Group} from 'react-konva';
But this is loaded before the DOM was created, so webpack couldn't resolve 'canvas', which resulted in a
Could not resolve module 'canvas'
Exception.
I made it work by moving this down to either componentDidMount or render method:
render() {
const {Layer, Rect, Stage, Group} = require('react-konva');
return (
<div ref="containerDOM">
<Stage width={700} height={700}>
<Layer>
<Rect
width="50"
height="50"
fill="green"
/>
</Layer>
</Stage>
</div>
);
}