We Keep Coding

How to protect svelte component from outer css styles

I have page index.html which includes file styles.css ( .foo{width:100%; ..... and other styles} )
via
<link href="styles.css">
And also this page includes svelte application
Svelte application has component with same class name .foo
<div class="foo"></div>
<style>
.foo{background-color:red;}
<style>
Svelte render it into something like this
<input class="foo svelte-12sas231dad">
Is there any method to protect my component's input from outer css ?
For example something to make
<input class="foo-svelte-12sas231dad">
without outer .foo class or may be another decision ?

The best solution is to not use global styles that accidentally apply where you do not want them to. I.e. remove the rules or use very specific class names that will not accidentally be used in components. Everything else is just a workaround to a fundamental problem you will run into again.
Given that Svelte adds classes with hashes you could target the element using a different method, e.g. just the tag type (input) or some data attribute.
As far as I know the only way to really isolate the element from styles would be adding an iframe which is far from ideal.

Are you using Sveltekit?
Perhaps you could use the The CSS !important Rule in your Svelte component styles.
Better yet, why not just change the class names?

ANGULAR using nativeElement.style: how to change cursor style when click-pressed(click on down state)

i have native elementRef
CODE:
this.eleRef.nativeElement.style = "_____?????_____"
what should be in "???" to give :active style to element.(i want to change cursor style to change on mouse click down(not click up))

No, it's not possible. Cause the active is not part of DOM tree, and because of that do not expose any DOM API that can be used to interact with them.
Usual approach if you want to deal with pseudo-elements programmatically is indirect: you add/remove/change class and in CSS make this class affect the corresponding pseudo-element. So in your case, you could have one more class that changes necessary style:
.yourclass:active {/* some styles */}
And use the ngClass to add and remove yourclass

styled-components - create class method?

I need a way to create classes without styled nor css method.
Lets assume proper style system with components having only basic styles, but not positioning, margin etc.
e.g.
const Root = styled.div`/* Some styles */`
export const MyComponent = ({className}) => <Root className={className} />
So this is easy, I attach private styles for component and I allow it to receive and apply class from parent.
If I have "classic" css, I would use it like this
import styles from 'some-styles.module.css';
...
<MyComponent className={styles.someStyle} />
Which will work as expected.
Here is the problem:
How do I create a class with styled-components only? It was working with Glamorous once, but SC (and Emotion) is not returning class name from css.
I can't use separate css files just to allow this styling, which should be common use case (parent setting size of children)
Edit & solution in Emotion
I figured out that Emotion adds extra property css which is available for every jsx element.
It can be used to native <div>, styled <Div> or custom React component <MyComponent.
Babel is changing css attribute with css({...}) to className during compilation.
If <MyComponent> only accepts prop className it will receive it from parent via css prop.

I still belive I should be able to somehow pass styles from parent to child.
There is a way to do that, but no exactly the way you want to do.
In react js (you can't do this in React Native yet), you can pass the child component inside the parent style and it will add the style in the child when it's wrapped by the parent.
e.g.
const ParentComponent = styled.div`
${ChildComponent} {
/* Child css*/
}
`
Sorry if formatting is bad, I'm on mobile

Change CSS properties directly in Angular 2+

In jQuery, we can do
JQuery('.someStyle')
.css({"background", "red"})
to directly change the CSS property in style.
In Angular 2+, we can use [style.<property>] to manipulate, is there an option to directly manipulate the style sheet?

Angular offer template reference variable like this. Here #textCont is a template variable which can be passed to component and it can be used to add styles
<div #textCont> I wil change color on click<div>
<button type="button" (click)="changeColor(textCont)">Click</button>
In component
changeColor (elem){
elem.style.color="red"
}
DEMO

Even with the jQuery snippet you posted you don't manipulate the stylesheet, only the CSS properties of the object representing the DOM element.
Why would you want to manipulate the stylesheet directly? You would have to modify it before the browser parses it - before it is sent from server to client. This is hardly desirable.
What you are probably looking for is just a way how to change styles of your DOM element dynamically.
There are many ways how to achieve that with Angular ranging from injecting ElementRef (object providing access to component's host element) to your component's constructor or using Renderer2 in order to change the styles directly on the DOM element, to templating (like the [style.<property>] you have mentioned) or even Angular Animations.

Just fixed a small bug from #brk here. In Angular 13+ you may use:
<div #textCont> I wil change color on click</div>
<button type="button" (click)="changeColor(textCont)">Click</button>
And in Component more "strict typing"
changeColor(elem: { style: { color: string } }) {
elem.style.color = 'red';
}

Dynamic CSS stylesheets based using State Values in React

I am implementing a custom color theme module. Simply the user selects two separate colors (a primary and secondary that are ANY hex value) and save the value in state. I use these colors to set custom dynamic styles to components in my application such as:
<Link style={{backgroundColor: this.props.myprofile.primaryColor}} to={href} />
This was working fine except for 2 issues.
It takes forever adding the logic to each component. I would rather be able to set a className and call the logic on every element with that className.
Psuedo Classes. Psuedo Classes such as :hover and :focus do not mix well with inline styling. I know about and have used Radium, but I would prefer to find a different solution.

React doesn't have any special control over CSS classes, it's the same as vanilla javascript. So you won't be able to manipulate pseudo elements for the same reason.
1) You can use React's state to set a classname conditionally, inside the render method. In this example I'm using a module called classnames but you can handle this logic however you like.
render() {
const isActive = this.state.isActive
const styles = classNames({
button: true,
'is-active': isActive
})
return (
<div className={styles}></div>
)
}
/* evaluates to
<div className="button is-active"></div>
*/
2) There's no real solution for javascript with pseudo classes. The best you can do is add classes you've defined in your CSS files that have pseudo selectors already.

So it seems the best solution I could personally find was still using my style method, but I was also forced to use Radium.
The dynamic of what I am trying to do makes using inline styles a necessity it seems because a CSS stylesheet can not be set by state dynamically unless there is a class for every case on the hexadecimal chart (which is what I want as options for my Users).
NOTE: Is important to understand when viewing this that the main reason for this decision is because the options I want for the user is every value the hex color chart can yield.
This is a dreadful way of doing this needing apply a style attribute containing the logic, but for the sake of the feature must be done to every component. This beats writing a class for every hex value.
To solve the issue with Psuedo classes I am using Radium for use of :hover and :focus. Not the solution I wanted from my original question, but the best I've got at the moment.
So the code if using Psuedo Classes looks something like this...
import Radium from 'radium'
<div key={i} style={{backgroundColor: primaryColor, ':hover': {backgroundColor: 'yellow'}}} />
const radMyComponent = Radium(MyComponent)
export default connect(mapStateToProps, mapDispatchToProps)(radMyComponent)
If anyone has a better solution. Please post. I would love to see.