const ComponentName = styled.div``;
Can we get the class name like class="ComponentName" in the output html instead of having class="btf79-fhjas MkrI" classe names?
if you want to display the styled components-name in the google devtools, I want to share an easy solution for that:
Install the Babbel plug-in like this: npm install --save-dev babel-plugin-styled-components
If you are usind create-react-app you should write
import styled from "styled-components/macro"; in the top-section of every component, that you wish to use styled components in.
As a result the name of the styled component will be show as the elements className in the devtools
Related
I developing a SPA with https://openweathermap.org/, so i display img with
<img src={`http://openweathermap.org/img/w/${data.weather[0].icon}.png`}/>
Instead of this, i want to display another image from my local folder.I have created utils folder with index.js and another folder named weatherIcon with icons in .svg
index.js i have
export const getWeatherIcon = (icon) => (/weatherIcon/${icon}.png)
in component i change
but nothnig display in app.
Question is: How display local image instead Api image
There are different ways to use images in a React Project. Since, React follows Component architecture we have flexibility in React.
So we can represent image (if it is an SVG image) As a React Component,and import and use it directly, or we can first import an image and use it in img tag's src attribute.
Please refer to watch this article to understand better and use a approach better suiting your needs.
betterprogramming.pub/how-to-display-images-in-react
Note: Sometimes in NextJS projec, I observed that we have to use React Component approach when using SVG. Also, we can use images in our public folder if they are .png, or .pneg etc and directly use absolute path to show them.
my solution
i crated new constance
const WeatherIcon = {
"01d": "/icons/01d.svg"
}
then then import to component,
import{ WeatherIcon }from "utils/index";
and use in Img tags
<img className="weather_icon" src={WeatherIcon[data.weather[0].icon]}/>
thx for helping
I followed this tutorial to do a server side render web app but when I attempted to implement React-Router I get the following error
Error: Element type is invalid: expected a string (for built-in components) or a
class/function (for composite components) but got: undefined. You likely forgot to export
your component from the file it's defined in, or you might have mixed up default and named imports.
I have been searching how to solve it but I cant seem to find a solution, any possible input would be awesome.
Thank you
Turns out the problem was in the imports one must need to import as follow
import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'
Also just the standard of loading the to the bootstrap file
When using devtools, the classnames are sometimes difficult to differentiate.
Emotion js has here a good solution: https://emotion.sh/docs/labels
Basically they use the "Label" Property in css to append that to the generated class name.
Here some examples:
css-a281on-some-name
css-1i3s76n-another-name
Does something like this exists for styled-components?
I could not find it.
If not, I would make a feature request.
You should try the babel plugin for styled-components. If the component ABC is created with styled-components in the file SomeFile.js, the class name for that component will look like SomeFile__ABC-fBdEtY JrIAq. Add the plugin to your babel config, either in .babelrc or in options.plugins in babel-loader if you use webpack.
I heard that there are two different ways of importing components/modules.
Component way
Library way
Anybody has an idea about these concepts?
Take a look at the root index of material-ui. If you import something from this index, you are loading everything that is exported, which ends up being the entire library in this case. If you are not tree-shaking, your bundle will include everything exported by the library and all of its dependencies (whether you use them or not).
It is best to import from the component index (see Button/index.js), because you keep your consumption of the library to a minimum:
import Button from ‘material-ui/Button’;
This issue comes up a lot with lodash and is covered in the mui docs: Minimizing Bundle Size
I found solution to my question. Below is what I was looking for
Library way of importing
import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';
This is nice and handy but it does not only import Button and FlatButton (and their dependencies), but the whole libraries.
Component way of importing
One way to alleviate this is to try to only import or require what is needed, let's say the component way.
Using the same example:
import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';
This will only bundle Button, FlatButton and their respective dependencies. But not the whole library. So I would try to get rid of all your library imports and use the component way instead.
If you are not using lot of components then it should reduce considerably the size of your bundled file.
Is it possible to theme jquery-ui via npm?
Or do we still have to go through the download builder?
The jquery-ui package has the default theme included at:
./node_modules/jquery-ui/themes/base/*.css.
If we require('jquery-ui') that won't load any css styling as well, right?
Do we need to require('./jquery-ui/themes/base/all.css')?
Or is there a better way?
Is it possible to theme jquery-ui via npm?
Yes, you can use jquery theme package (link).
npm i jquery-ui-themeroller.
And import it
require('./jquery-ui-themes/themes/dot-luv/theme.css');
dot-luv is the name of theme.
Here is official document, not only theme list also tool for customize theme.
Remember to import jquery css file first require('./jquery-ui/themes/base/all.css')
If we require('jquery-ui') that won't load any css styling as well, right?
Yes, you should import require('./jquery-ui/themes/base/all.css'); to get the style file.
Do we need to require('./jquery-ui/themes/base/all.css')?
It is the simplest way to get all widgets style. But in most case we only need several widget.
That say we want datepicker only, we should import css file by
require('./jquery-ui/themes/base/core.css');
require('./jquery-ui/themes/base/datepicker.css');
And now you can use your own theme in the end.