I have this Chakra UI component:
<Tag
variant={'outline'}
cursor={'pointer'}
outline={'none'}
className={`${styles.editProfileAvatarIconCamera} ri-camera-line`}
></Tag>
Which renders an outlined camera icon like this
Now I'd like to remove the outline. I tried to add outline={'none'} like the above, but it didn't work. In console I can see that Chakra CSS is always in the highest priority and overrides all other CSS.
How can I apply this custom CSS to the Tag component? I tried importing a SCSS file, but it's the same, overridden by Chakra default CSS.
What you can see there is a box-shadow not an outline:
<Tag
variant={'outline'}
cursor={'pointer'}
boxShadow={'none'}
className={`${styles.editProfileAvatarIconCamera} ri-camera-line`}
></Tag>
Related
I am trying to display an HTML string with inline CSS in flutter using the Flutter_Html package. But It is not styling my text according to my inline CSS, It just showing depending on the tags.
Here is my code
Html(
data: """<p>Hello <span style="color: #fbeeb8; background-color: #e03e2d;">World</span></p>""",
)
There are some other packages. You can try those.
simple_html_css
flutter_widget_from_html
Inline styles are not released yet for flutter_html, but will be soon (as discussed on this issue), but you may use master branch override if you already want to use it.
I have an ionic/angular app which autogenerates a custom tag element with a different _ngcontent attribute each time e.g.:
<tag _ngcontent-hgr-c2>...</tag> (1st refresh)
<tag _ngcontent-agj-c7>...</tag> (2nd refresh)
<tag _ngcontent-cfx-c5>...</tag> (3rd refresh)
Is there a way to use regex to target the custom tag attribute?
This didn't work:
tag[^=_ngcontent-] {
color: red !important;
}
Nor did just targetting the tag app e.g.:
tag {
color: red !important;
}
According to this answer, there is kind of regex in CSS, but it can be only applied to attribute's value, not to attribute itself. The W3C documentation says the same, so because Angular creates custom attributes, I'm afraid that it can be hard to achieve by regex.
If you want to style your tag like in the second example you can do it by defining its styles in global styles.scss. This is not the best solution, but should work.
This angular-blog article recently helped me understand the idea behind the style ecapsulation.
Unfortunately, there is no wildcarding support in CSS for attribute names.
If you have access to the application code which generates the custom tags, you should add classes to these elements (if the app supports it).
See also this question.
I have QSting object:
QString someString = "<a href='link'>some text</a>"
and QLabel object:
QLabel someLabel.
with this text:
someLabel.setText(someString);
I set property for QLabel:
someLabel.setProperty("class","someID"),
and in CSS document set style for this label like this :
#someID
{
// some style
}
But style from CSS not appled to Label's text. It set default blue underlined style from css.
Question: How set style from CSS?
You could try to set the style sheet through the setStyleSheet() method.
Examples can be found here.
The important distinction to make is that there are two completely separate styling systems that affect what a QLabel does:
CSS stylesheets set on a widget via setStyleSheet() method.
In these stylesheets, # selects on the id of the object - its name. So, you should be setting the object's name, not the class property:
someLabel.setObjectName("someId");
Then the #someId selector will apply to someLabel.
CSS styling attributes applied to the rich text contents displayed by the label. These can be provided via in-line style attribute, for example <span style="font-size: 20px">FOO</span>. The <style> element in the <html> is also supported, but the external stylesheets are not supported - so the stylesheet must be within the <html>. All CSS 2.1 selectors are supported. For example,
<html><style type="text/css">em {color: red}</style>
<body><em>URGENT!</em></body>
</html>
I just finished creating a site with a few HTML pages and a CSS style sheet. Near the end of the project I decided I would like to change some of the class names.
Example:
In my CSS I have .classname and in my HTML I have quite a few tags linked to that css class using
class="classname"
I would like to change .classname to .class-name in my CSS Style Sheet, however, if I do this I would have to go through thousands of lines of code in my html pages to find and change all the class names from class="classname" to class="class-name"
is there a program that can be used that allows you to change a class name in the css and it will go through all html pages and change it there as well?
I use dreamweaver. Is there a way to do this in dreamweaver?
Note: I have tried using the find and replace options in dreamweaver however this does not fully work.
I'm not able to search "class="classname"" and replace it with "class="class-name" because some tags use "class="example someclass classname test""
I'm not able to search "classname" and replace with "class-name" because "classname" can be found in between <p></p> as content and I do not want it to change here.
Thank you!
I am not familiar with DreamWeaver options, but if you have a preferred advanced text editor (I use NPP) you can use regex.
I would try an expression such as (?<=class="[^"]*)(classname)(?=[^"]*")
And replace that
I've inspected the code of https://highlightjs.org/.
In between the ... i've found a suspicous class attribute assigned to a tag. For example:
<link class="codestyle" rel="stylesheet" href="/static/styles/default.css" disabled="">
Google and the MDN truned out to be not helpful. Instead the MDN didn't even list the class attribute as possible attribute for a tag.
Does it have any effect?
Is it common to assign class attribute to <link>?
No.
What is it's effect?
The same as for any other element.
It makes it a member of a class so it can be identified as part of a group by languages/apis that include a means to access elements via their class (such as CSS, DOM and XPath).
It's there to make it easier to query alternate stylesheets in the script that switches style of a snippet. Look at line #14 of the page source.