<va-input
label="Device ID"
type="text"
v-model="deviceid"
required />
i am using vuejs, i need to change font-size and color of above label tag . whenever i write style like below
label{
color:red,
font-size:20px
}
it will effect all other pages.
Use scoped attribute
Use CSS module
Use BEM naming convention
Use your naming convention
Or use a libary's convention.
Of course you could mix match between naming approach with the other approach. I myself prefer combine the (1) with (4). At first I thought scope attribute is safe enough for scope style, but when working with projects, it turned out it's not, because of the mechanism it's used under the hood for the scope attribute is just automatically add some data attribute like [data-v-f3f3eg9]..
An example of my approach:
//MyComponent.vue
<template>
<a class="MyComponent-button">The Button<a>
<template>
<style scoped> // scoped
// use `MyComponent-` prefix for scope naming convention
.MyComponent-button {
color:red;
backgroundcolor:blue;
}
</style>
In the style block you can specify scoped like so:
<va-input label="Device ID"
class="label-style"
type="text"
v-model="deviceid"
required>
</va-input>
<!-- above is in the template -->
<style lang="css" scoped>
.label-style label {
color:red,
font-size:20px
}
</style>
This will make this style dependent on data tags and won't affect things globally. This can be a bit slow so you may want to look into something like BEM or CSS modules for a more performance-oriented solution.
It won't work because from what I'm seeing the label element is generated in the 'va-input' component. Scoped styles are only applied to the elements in the current component.
What you can do is either add the following tag to the va-input component
<style scoped>
label{
color:red,
font-size:20px
}
</style>
or add a specific class or id to your label in your va-component and then you can style only that label from anywhere...
Hope this helps
Related
I would like to understand the benefits of using CSS Modules with React/Vue.
Currently in my company developers use the following in development:
return (
<div className={styles.User}>
<div className={styles.name}>...</div>
</div>
)
While using a CSS module file, something like:
.User {
background-color: var(--bg-color, red);
.name { color: white; }
}
What should an HTML output such as:
<div class="_User_xyz_1">
<div class="_name_abc_1">...</div>
</div>
Which is a bit confusing for me, as this "encodes" all the class names and creates a great deal of difficulty if I need to do a parent-level modification. Eg.:
<div class="SomeParent">
<User name="David" />
</div>
So:
.SomeParent {
> .User {
--bg-color: blue; // Will not words, because .User is not .User, in fact.
}
}
In personal projects, I prefer to name the primary element of the template by defining it as a "major class", the main. Eg.:
return (
<div className="User">
<div className="name">...</div>
</div>
)
And a regular CSS/SCSS:
.User {
background-color: var(--bg-color, red);
> .name { color: white; }
}
So a parent element's code can affect a child element under expected and controlled conditions.
My question here is: what are the benefits of using the model that my company uses that I am not able to see? Am I missing something using a more "moderate/primitive" model?
Another possibility is: can I modify the style of child elements through the parent element, even with the name of the classes being encoded this way?
CSS modules generate custom classnames for each style and therefore prevent the problem you are facing in your solution. Because each css module style has its own classname you cannot accidentially change a child components style.
SCSS module styles are applied by very unique classes thanks to the hash, and therefore have no real risk of unintended style collisions. This allows you to use short, meaningful class names without having to think of any global styles you might be colliding with. You can confidently style without fear of breaking things elsewhere in your application.
You could, in theory, add generic class names which are not applied via your scss modules to give your parent component a class name with which to work.
Personally I think the React components should be as modular and generic as possible. I think the way to go is such that types are exported from one component. Styles should be inline or at the bottom at a styles object.
hash className, preventing other developers from quickly decompiling your style scheme.
I'm trying to add a background-image to a view in vue vite. I don
't want to set this background-image on every view so I tried to add it inside the views site using a scoped css style.
But once I assign scoped to the style tag it won't use the style...
Example code which doesn't work:
<style lang="css" scoped>
body{
background: url("../../assets/images/background.jpg") !important;
}
</style>
Once I remove the scoped it would work but it would add the background to every view which shouldn't happen. Does anyone know why this happens?
From the docs
When a <style> has the scoped attribute, its CSS will apply to elements of the current component only.
This means thst only the elements in your <template> will get the style and since there is no <body> in your template, then it doesn't get style.
I'm using react-select and I'm trying to style the Select component like written in the DOCS but adding a class with className does not work. The class tag is added to the DOM element's classes but doesn't affect the element itself. The theme stay the same.
If I add a class like this:
<Select
className='my-class'
{...selectProps}
/>
The DOM element looks like this:
<div class="my-class css-2b097c-container">
...
</div>
Which means that the default class css-2b097c-container of react-select will always "override" my custom class.
I've tried to use the classNamePrefix option but did not work either :(
In order to keep my UI design complete I need to design it with classes and not with inline styling!
classNamePrefix works for most but not all components which is kinda annoying to me. Another solution is to add your own className as stated in your question but refer to both of them in your css using [attribute*=value] selector to increase specificity.
<Select
className="mySelect"
options={options}
/>
.mySelect[class*="-container"] {
background-color: lemonchiffon;
padding: 10px;
}
Live Example
Without specifying/wrapping with a selector (button {}), the following styled-jsx style declarations will work. The button is properly styled which is great. However, usage like this is not documented in website so i wonder if this syntax is officially supported and safe to use?
<button>
<style jsx>{`
background-color: red;
:hover {
background-color: #ccc;
}
`}
</style>
Test
</button>
Another example, using resolve tag that works too:
const { className, styles } = css.resolve`
font-weight: bold;
`;
styled-jsx uses stylis css preprocessor under the hood. This is how styled-jsx transforms content of a style tag:
transformedCss = transform(
isGlobal ? '' : getPrefix(dynamic, staticClassName),
plugins(css, pluginsOptions),
{ splitRules, vendorPrefixes }
)
Note, that transform here is a wrapper function around stylis.
Thus styles declared inside <style jsx> tag will be wrapped with dynamically generated class and then transformed with stylis.
In your case styled-jsx will produce this css:
If you use global selector no class selector will be added to the generated code and so produced css wont be applied to any elements on the page.
From my point of view it won't be a mistake to use styles without a selector, however, you should do it carefully with a <style jsx> tag because in this case styles will be applied to every element inside a component.
Using this feature with css.resolve looks much more safe since you may manually pick the elements to apply css.
As far as I know, the official documentation misses the explanation of such an important detail.
I'm creating a plugin and it has it's own css file (compiled from sass)
I was just wondering what the best way to approach would be regarding overriding styles.
For example, I set a H1 style for my plugin. How can I make it so that the user does not override this with their H1 style?
I know I could ask them to add my style sheet last but then my style would override theirs.
How should I approach this?
You can use unique id's or class for your elements.
or best way is
<div id="parentWrapper">
<!-- Your plugin's elements goes here -->
</div>
your stylesheet would be
#parentWrapper h1 { // h1 definition
}
#parentWrapper p {
}
.
.
.
The best way to avoid style collision is to ring-fence your plugin from what a user may be implementing in their own code by adding plugin specific classes to elements.
E.g. you would style h1 by adding a class called say myPlugin-h1
<h1 class='myPlugin-h1'></h1>
You could then either use your plugin to add these styles into the DOM, or require the user chooses where to add them (preferred).
That said..Typically plugins allow users to add a single class to a 'top level' element to denote it should have a plugin applied, and then the plugin stylesheet prefixes elements by this class, or assigns classes to child elements dynamically.
So, in your HTML you may have:
<div class='myPlugin'><!--
content either dynamically added by your plugin or already present
--></div>
Then your plugin CSS would include .myPlugin h1
Just add a class to your h1 tag and that will do the trick.
You do not need to add an !important tag to the <h1>, that will prevent the class to take it's course.
HTML
<h1>Hi</h1>
<h1 class="blue">This</h1>
CSS
h1{
color:red;
}
.blue{
color:blue;
}
And a working demo : http://jsfiddle.net/52Jd5/2/