How can I use next 2 CSS examples in React to act exactly as I would do it in plain CSS/HTML, but without using danerouslySetInnerHTML:
#media (max-width: 600px) {
.main {
border-radius: 0px;
}
}
.un:active, .pass:active {
border: 2px solid rgba(0, 0, 0, 0.18) !important;
}
I did tried to Google those 2 cases but there wasn't anything that covers them.
EDIT: There is much more css behind the scene and I want to transform that css and html to React component. The problem is that I don't know how to transform media query from plain CSS into React. I want for that media query to be applied on entire Component. I know how to transform CSS to React in general, but I have this specific situation (I am still new to React) when there is media query and grouping selectors and I don't know how to transform those in React to be used in that component for only that component.
The danerouslySetInnerHTML is not a proper way to add CSS to a react application, there are many ways to add CSS, for example I use PostCSS preprocessor and for example Less, Sass, SCSS, JSS and many other ways are exist that you can use them, But if you just wanna run a test, make a style tag and put these two CSSes in it and absolutely your browser find it out and show you the results like plain HTML/CSS.
Do like this below code:
<style>
#media (max-width: 600px) {
.main {
border-radius: 0px;
}
}
.un:active, .pass:active {
border: 2px solid rgba(0, 0, 0, 0.18) !important;
}
</style>
And put it in your code. Undoubtedly it works.
But with your more explain and editing the question, I understand that you need JSS for your work, for more information visit this link
You can use in inside of your react app with less complexity. you can prepare your CSSes just like you want, as a JavaScript object:
const viewPortSizes = {
height: "100vh",
width: "100vw",
};
And then use it in your JSX tags.
Hope it helps you.
Related
I am trying to dynamically render a Styled Component. In the past, this was easy to do because all the style declarations would be done within the component itself. However, now I am trying to keep a separation of concerns. Therefore, I have stored the CSS in an external file. This works fine and does the job, however, now I am trying to dynamically color the font based on props. I am not sure how to do that and have been looking all over.
Here is my component that needs the dynamic font color.
<Styled.HeroHeadline as="h4">
{parse(el.header)}
</Styled.HeroHeadline>
And here is the styles file that I am declaring the css:
export const HeroHeadline = styled(Heading)`
p,
div,
span,
h4,
h3 {
display: block;
color: {dynamicProp}
#media (min-width: 992px) {
font-size: var(--font-size-h1);
letter-spacing: var(--letter-spacing-100);
line-height: var(--line-height-h1);
margin: 0;
text-align: center;
}
}
`
Anyone have any input? I would greatly appreciate it. Thanks!
I tried to add find a way to store the prop as a value in the external css file, but wasn't sure how to do so.
I also have searched to see if anyone asked this before but found nothing on the same topic.
See the CSSStyleDeclaration interface.
It's possible to do, for example:
element.style.backgroundColor = "red"
How do we style library packaged component from via styles.scss?
For example suppose we have a <hello-component> and the template looks like this:
<div><h1 class="fs-HelloHeading">Hello!</h1><div>
How can be override the CSS inside fs-HelloHeading class and do it in a way that is context sensitive?
So for example if <hello-component> is inside <party-component> then it should have a yellow background, but if it's inside funeral-component then it should have a black background, and we would set these by overriding the styles in fs-HelloComponent. Thoughts?
My end goal is to override classes that are packaged with a component. For example I have these packaged with an Angular Material Table Component.
.mat-header-cell {
justify-content: left;
white-space: nowrap;
min-width: 12rem;
}
.mat-cell {
justify-content: left;
white-space: nowrap;
min-width: 12rem;
}
However I may want to change the width from outside the component later in a specific context, so I was thinking about doing that by adding additional css classes to the mat-row-element.
It is possible to override a style with the !important keyword. from top to bottom, the last !important will be applied. To set individual stylings depending on the surrounding element you can just 'mimic' the DOM-structure. Here is an example what you can put just on the end of the SCSS-file.
party-component {
hello-component {
background-color: yellow !important;
}
}
funeral-component {
hello-component {
background-color: black !important;
}
}
Please note that you have to replace colors and component-names with actual values.
Just try to define another custom selector with more or equal specificity to your CSS selectors.
if any rule is overridden,then you need to use !important flag to force your custom css rules, also consider that when you are using bootstrap, then some utilities classes have !important attribute.
<h1 id="custom-id" class="fs-HelloHeading">Hello {{ name }}!</h1>
style.css:
#custom-id {
color: blue;
}
you may want to use :host and ::ng-deep like
:host ::ng-deep .fs-HelloHeading { // in party-component css file
background-color: yellow;
}
:host ::ng-deep .fs-HelloHeading { // in funeral-component css file
background-color: black ;
}
it will look for all the child elements of these components
for more detail. Here's the docs: https://blog.angular-university.io/angular-host-context/
Apologies about the vague question in the title, but I've been learning how to build and style dashboard's in plotly dash using CSS for several months now and I've always struggled when trying to style dropdown menus. That is until I tried to replicate this dashboard using this code because I liked how the dropdown looked:
It appears that the code that controls this is in the custom-styles.css file and looks like:
.Select-menu-outer {
background-color: #2f3445;
border: 1px solid gray;
}
.Select div {
background-color: #2f3445;
}
.Select-menu-outer div:hover {
background-color: rgba(255, 255, 255, 0.01);
}
.Select-value-label {
color: #a5b1cd !important;
}
But neither '.Select-menu-other', '.Select div' or '.Select-value-label' appear in the python files as a className (or at all for that matter), so I'm a bit confused because I thought in CSS the dot notation was used to create a class that would then have to be called from Python but it's as if these are pre-assigned classes.
So my questions are:
What are these classes? Are they pre-assigned and in what language? Is there any documentation on them?
Are there any other classes of this type that can used to control the styling of Radio Items, Sliders or Date Range Pickers etc?
If I'm following somebody else's code how do I know if they're using a pre assigned class or a class that needs to be called explicitly
It looks like they might be something to do with Javascript but I couldn't find any documentation on them but I could be wrong so any help would be appreciated.
Various libraries offer styling solutions via props of components, while the "standard" way for a long time has been to write CSS, separately.
With the invention of CSS-in-JS, it's now possible to have some benefits we didn't have before (e.g string literals, conditional classes, plugins to extend functionality, etc.), and on the separation level, it can be used like CSS style tags in HTML, where it's possible to define in the "main" file (HTML, in the case of CSS) an environment to write the code in, and we have more flexibility, but with JSS, for example, it's a common practice, from my understanding, to centralize the styling code in a classes object.
On the other hand, we can write not just inline CSS in components, but various libaries offer styling solutions as props of components such as Material-UI.
So, my question is:
what advantages pros and cons do you think there are for writing CSS-inJS compared to writing styling code using component props?
*Disclaimer: I don't have a lot of experience with CSS-in-JS and styling in React in general, so I might have a wrong impression of what things are like generally/in the bigger picture.
*Do notice that I'm not asking about inline-CSS in components and that this is not an inline vs non-inline question, but a more specific one.
You ask about the Pros/Cons for those cases:
Dynamic className
const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
},
});
export default function App() {
const classes = useStyles();
return <Button className={classes.root}>My Button</Button>;
}
Which is just a nicer implementation of:
import './myStyle.css'
export default function App({ styleName }) {
return <Button className={styleName}>My Button</Button>;
}
Pros:
Simple and straight forward.
Cons:
Writing CSS-like object (not real CSS).
Such implementation is decoupled to the UI library
There may be a library that can be used across projects, but still, why just not using CSS-in-JS with it is the case?
CSS-in-JS
const PrettyButton = styled(Button)`
background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
border: 0;
borderradius: 3;
boxshadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
color: white;
height: 48;
padding: 0 30px;
`;
export default function App() {
return <PrettyButton>My Button</Button>;
}
Pros:
Writing a real CSS (you get auto-complete, CSS formatting, style-linting, not writing string literals which are error-prone, etc.)
CSS-in-JS benefits (Google it).
Cons:
The debate of why not to use CSS-in-JS (Google it).
Pass the classes around.
Passing CSS like props to component is not gonna work .
I am trying to develop something where I need this requirement, I tried a couple of things, but not able to do it.
There is one style - A:
.someClass {
padding-right:10px;
}
now I want to add margin also in same class like - B:
.someClass {
margin-left:10px;
}
Now I need both, padding and margin. The thing is I can't modify A as it set by some third party JS, which doesn't reside locally.
So, is there any way I can achieve this by Pure CSS or JS (NO Jquery)
There is one style - A:
.someClass {
padding-right: 10px;
}
No, that is not a "style". That is a "rule". It says to apply padding-right to elements with the someClass class.
Now you add another rule:
.someClass {
margin-left: 10px;
}
That says to apply margin-left to elements with the someClass class.
Together the two rules do exactly what you want. The key point is that CSS will apply all rules whose "selectors" (here, the .someClass part) match the element in question. If the two rules contain the same properties, then there are ways (involving concepts such as "precedence" and "specificity") in which CSS will choose which one to apply, but that is not the case here, so both padding-right and margin-left will be applied to elements with the someClass class.
You can put both margin and padding into the element at once:
.someClass{
margin: 10px;
padding: 10px;
}
Also if the margin or anything else is set by like you said third party JS you can Override it in CSS by adding: !important so your code would look like this:
.someClass{
margin: 10px !important;
padding: 10px !important;
}
According to your question you need only padding to override.
Hope i understood your Question and could help.