I am trying to change CSS in a particular file using emotion/css but when I do this nothing changes. what I am doing wrong
const remove = css`
::-webkit-scrollbar-thumb {
background-color:red;
width:20%;
}
`;
<View className={remove} />
Related
I've got some data represented in my map and I want to create a legend that has the same image of my data and name.
My data are Geojson files.
My map looks like this :
Map without Legend
I want to develop a legend like this :
Map with Legend
This is my code that represents data to the Map :
import React from "react";
import L from "leaflet";
import {
MapContainer,
TileLayer,
GeoJSON,
Marker,
Popup,
LayersControl,
} from "react-leaflet";
import noeud from "./../data/Noeud.json";
import section from "./../data/section.json";
import casier from "./../data/casier.json";
function Macarte() {
const noeud_icon = L.icon({
iconUrl: noeud_image,
iconSize: [10, 10],
});
function casier_style() {
return {
fillColor: "transparent",
color: "red",
};
}
function section_style() {
return {
color: "black",
};
}
return (
<MapContainer className="map" center={[45.7133, 5.52826]} zoom={11}>
<LayersControl position="topright" />
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{noeud.features.map((data_noeud) => (
<Marker
icon={noeud_icon}
position={{
lat: data_noeud.geometry.coordinates[1],
lng: data_noeud.geometry.coordinates[0],
}}
>
<Popup>
<div>
{/*<h1> {"Nom modèle : " + data_noeud.properties.Nom_modele} </h1>*/}
<h1> {"Noeud : " + data_noeud.properties.NOM} </h1>
</div>
</Popup>
</Marker>
))}
<GeoJSON
style={section_style}
data={section.features}
/>
<GeoJSON
style={casier_style}
data={casier.features}
/>
</MapContainer>
);
}
export default Macarte;
Please Help :)
A similar question has been answered here.
Legend component
function Legend({ map }) {
console.log(map);
useEffect(() => {
if (map) {
const legend = L.control({ position: "bottomright" });
legend.onAdd = () => {
const div = L.DomUtil.create("div", "legend");
div.innerHTML =
"<h4>Legend</h4>"
return div;
};
legend.addTo(map);
}
}, [map]); //here add map
return null;
}
in a .css file you can establish rules for the legend then import it into your legend component.
.legend {
padding: 6px 8px;
font: 14px Arial, Helvetica, sans-serif;
background: rgb(255, 255, 255);
line-height: 24px;
color: rgb(0,0,0)
}
.legend h4 {
text-align: center;
font-size: 16px;
margin: 2px 12px 8px;
color: rgb(0,0,0)
}
Then you can simply put the Legend component wherever you want.
I have been able to set up Server side rendering with Vuejs 3 using the code below but the renderToString method doesn't include the CSS and I also need to get the CSS rendered by the components.
example
const { renderToString } = require('#vue/server-renderer')
const createApp = require('./server/app').default
module.exports = async function (settings) {
const { app, router } = createApp(settings);
if (settings && settings.url) {
router.push(settings.url);
await router.isReady()
}
const html = await renderToString(app);
var toRet = { html: html, css: 'Still Need to get' };
return toRet;
};
The Single File Components so far are just boilerplate code specifying the CSS as scoped (shown below) but I'm also debating using CSS modules. I need the CSS in the Javascript file and not loaded separately as the site will be ran both in a Client Side manner with no Server Rendering and a Server Rendering manner.
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
I create button using styled components:
import styled from 'vue-styled-components';
const buttonProps = {
color: String,
br: String,
pad: String,
bgc: String,
bgch: String,
icon: String,
};
export default styled('button', buttonProps)`
color: ${props => props.color};
border-radius: ${props => props.br};
padding: ${props => props.pad};
background-color: ${props => props.bgc};
&:hover {
background-color: ${props => props.bgch};
}
&::before {
content: '';
background-image: url('~/assets/img/svg/${props => props.icon}');
width: 22px;
height: 22px;
}
`;
I try add background-image from assets directory but Nuxt return error 404 not found image. When I move image from assets to static and change in component:
...
background-image: url('/${props => props.icon}');
...
Image work correctly.
My structure images directory:
Run button:
<TestButton color="#000" br="red" pad="10px" bgc="green" bgch="red" icon="advertisement.svg">aaa</TestButton>
How I can send to styled component image from assets ?
I think you need to reference them differently
background-image: url('/${props => props.icon}'); // is for static
background-image: url('~assets/img/svg/${props => props.icon}'); // is for assets
// or
background-image: url('#assets/img/svg/${props => props.icon}');
Hope this helps!
I just started learning Vue and I was wondering, why should I use v-bind for style and not write it regularly in html/css file
Let's say you need to create a progress bar that is not static. You will then need to update the style attribute width for-example.
To accomplish this, we need to programatically edit the width of the element. We 'cannot' to this in plain css, therefore the :style attribute comes in handy.
Let's create an example:
Codepen
HTML
<div id="vue">
<div class="progress-bar">
<div :style="{'width':progress + '%'}" class="progress" />
</div>
<button #click="fakeProgress">Init fake progress</button>
</div>
Css;
.progress-bar, .progress {
border-radius: 20px;
height: 20px;
}
.progress-bar {
width: 250px;
background-color: gray;
}
.progress {
background-color: blue;
width: 0;
transition: all 1s ease;
}
Javascript
new Vue({
el: '#vue',
data: {
progress: 0
},
methods: {
fakeProgress() {
let progress = setInterval(() => {
if(this.progress == 100) {
clearInterval(progress)
} else {
this.progress += 1;
}
}, 50)
}
}
})
As you see here, we bind the progress data attribute to the width value on the fake progress bar. This is just a simple example, but I hope this makes you see its potential. (You could achieve this same effect using the <progress> tag, but that would ruin the explanation.
EDIT; Also want to point out that you are supposed to write all your css as normal as you point out in your question. However, :style is used in cases that you cannot normally use css for. Like the example above where we need css to change from a variable.
I have a vueJS component that I want to print. However, when I use the standard print dialog I lose all the CSS and basically only have plain text.
I have also tried Printd.
My code is along the lines of:
mounted () {
this.cssText = `
.a4-paper {
height: 29cm;
width: 14cm;
}
h4, h3, h2, h1 {
text-align: center;
width: 100%;
}
label.underline {
border-bottom: solid black 1px;
height: 0.3cm;
width: 100%;
}`;
this.d = new Printd()
},
methods: {
show(event: Event) {
this.event = event;
this.visible = true;
},
print() {
this.d.print(this.$el, this.cssText)
}
}
However, the result looks nothing like how the component is rendered. I haven't been able to find a solution for this. Can somebody help me?
The problem exists because printd creates a new Document for printing, therefore styles aren't carried down into the child component, which you are referencing with this.$el
The workaround which I use is to take all of the style elements from the head of the current document and append them to the document that printd creates. Change your print method to the following;
print() {
const d = new Printd()
d.print(this.$el, this.cssText, (win, doc, node, launchPrint) => {
// Get style elements
const styles = [].slice.call(document.getElementsByTagName('style'))
// append them to the the new document head element
styles.forEach(styleElement => doc.head.appendChild(styleElement.cloneNode(true)))
launchPrint(win)
})
},