We have several button elements that we would like to style in different ways. We originally added styling to them in the style.css file by adding css to the .button tag. The problem with this is now we would like to add more buttons, but with different styles. Since we added the styling to .button they all end up looking the same. Is there any way to add classes or ids to built-in idyll components?
You can add the className property to a button like [button className:”newName”]...[/button]
Related
I want to do this because I get stylized text from "Portable Text to React". However my index.css (global style)
which has a css reset, removes all the default styling from elements of the portable text.
How can I exclude the reset.css from this 1 react component (or solve this in another way you know) ? Adding .unset * {all: unset} or .unset * {all: unset} class does not create the behaviour I want. It removes all styling instead of re-giving the styling to h1s, spans, lists etc.
In here what you can do is, you need to separate your styles for different components. Normally don't use global css to add styles to jsx code.There are couple of ways to add separate css for your component. In here what it does is, these styles are targeting only for selected components.
Option one -use module.css file.
in here you can add css classes only inside the module.css file.(dont use id selectors inside here).Read this reference, you can get full idea about this.click here
option two -use third party library like styled component.
this doc explain clearly what need to do and have many examples to get idea.click here to navigate the doc
Solved: Give this class to the element. revert behaves exactly the way I want. Returns all elements inside this one element to browser default styling, while my css reset remains active on rest of the application. I don't know if there are any drawbacks.
.unset * {
all: revert;
}
I using ANTD framework for building an app.
And latelly i noticed one small issue with one of ANTD elements when i import antd-theme.css
For some reasons that css overides rules for one ANTD elements and makes it look terrible.
I cannot refuse from using this css stylesheets because it's needed for other elements all over the app.
So it's imported in index.js
Also i cannot overide this rule which breaks ANTD element, because it's stylesheet has 24844 lines.
And i will never find what exectly breaks it.
Believe me I tried:(
I was curiouse is there some how possible to make some element/elements ignore certain stylesheets?
Like something
<Radio style={{igonereCss}} />
I think you can give your element a class that you define and it will use that over the other styles
<radio class="mystyle">
Then in your main css style sheet just define a style for that. It doesn't have to do anything, but it might override the styles that are happening elsewhere.
.mystyle {
}
you can change style of specific component by overriding default class in your css file (you will get all the element classes from developer tool) for that element
.ant-radio-checked .ant-radio-inner{
background-color:#fdfdfd !important;
}
as a result it will override the style globally, to override the style for specific component only just wrap the component in some div by giving class "test" and override the css
.test .ant-radio-checked .ant-radio-inner{
background-color:#fdfdfd !important;
}
and it will update the style for specific component only
This is for a class project I have finished, but we can get bonus points for doing extras. I removed the underline in my hyperlink, and I was wondering if there was a way to put the underine back on a mouseover? I'm also not allowed to use CSS or anything other than HTML. I don't know if it is possible, but here is what I have:
<a href="http://www.tolkien.co.uk/index.html" style="text-decoration:none">J.R.R. Tolkien
This is the best I could come up with. What I will say though is that you are technically using CSS with the style, onmouseover, and onmouseout events, it is just doing so without the need of a CSS file because the style event is just making html understand it itself. The style event is then on the other two events, giving them the power to use CSS with only the html file.
J.R.R. Tolkien
You can't do this without Css, if you want to try it's :
a:hover{ text-decoration: underline;}
HTML has no mechanism to remove the underline from a link containing text.
The text-decoration: none syntax you are using is CSS. The style attribute takes the body of a CSS rule-set as its value.
The only ways to apply CSS dynamically based on if the mouse is pointing to something are with a separate stylesheet (where you can use selectors, including rulesets) or with JavaScript (where you can modify the CSS based on events).
I'm in Wordpress... And I have a Wordpress theme with lots of css files included. Don't blame me please.
I want to use the powerful plugin "Gravity Form" but the theme contains many defined form tags and it make so bad...
===> So I want to reset all css code of input,select,buton tags etc... only inside the div CLASS "gform_wrapper". ["css_Div_Iframe" in fact xD]
Any Idea ?
Do you know how to do that ? Thanks.
If I understand you correct you would like to make specific styling to a specific including the elements inside this - am I right?
If so, it may be easier for you to add a specific class to that div, like:
<div class="specific"><p>My text</p><div>
Then you can use ordinary CSS to target that specific using for instance:
<style>
div.specific {background-color:#cecece;}
.specific p {font-size:16px;}
etc ...
</style>
If you get a CSS conflict you can overrule the CSS styles by adding !important to the CSS, like this:
div.specific {background-color:#bebebe !important;}
I have a div with class "class1" . And a class: .class1 input {etc} so that all the inputs in the div get styled.
Is there away to make sure one specific input in the div does not get styled, but instead keeps the default input styling/button?
Since there is no :not selector in CSS 2.1, your best bet would be to assign classes to all of the inputs that you want to have a certain style. Then, target them like this:
.class1 .inputclass1
and then your other input (the one that needs default styling) won't be affected.
If you want to use CSS 3, then you can use :not like so:
.class1:not(.defaultclass1)
and give defaultclass1 to the element you want to have default styling.
You can either:
(1) Amend .class1 input {etc} to .class1 input.a {etc} and apply the style a to all your inputs bar the special one.
or
(2) apply an inline style to the special input in question resetting its format.
in a situation like that you have two kinds of inputs in this div. one that should be styled and one that shouldn't. You basically have two classes of inputs, but you haven't givven them class names. I would suggest giving them class names (e.g. styled and nonstyled or what not) and basing your css off of that. Otherwise you could use a pseudoclass, but that I'm not too sure on.
You can take a look at the :not() selector. However, this is not supported by IE. Probably easiest to provide a CSS over-ride for the specific input that you would like to be "default" styled.
in case you are planning to support all browser which do not support CSS3. You can over-ride the rule by making another class. like
.class input {etc}
and then over-ride etc rule by giving some other class to that input e.g. .notClass
input.notClass {over-ride etc }
You can use .class imput[type]{} if this is another type of input
Best way is use a class for that all input like .class1 input.all{} and leave the non style one without any class