How to use media print within Reactjs web app - javascript

I would like to hide a div when print preview happens but I find it almost impossible to do it in a React.
<div className="contacts"></div>
Is there any possibilities that I can add pure css or if React Stylesheet supports #media print and hide element with class name contacts when print preview.
I was reading this article https://blog.logrocket.com/the-best-react-inline-style-libraries-comparing-radium-aphrodite-emotion-849ef148c473 but it just seems too much work for something that I would do poorly in css within a matter of seconds.
Any idea how can I achieve such thing in Reactjs?

Inline media queries are not possible. The closest you can get is inlining a stylesheet, like so (in React syntax):
<div className="contacts">
<style>
{`#media print {.contacts{display: none;}}`}
</style>
</div>

A bit old but maybe it will be useful for someone. If you want to use React styles you can also do:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
contacts:{
display: "block",
},
[`#media print`]: {
contacts:{
display: "none",
},
}
}))
...
const classes = useStyles();
...
<div className={classes.contacts}></div>
This markup works for me with FunctionComponents flawlesly.

You cannot use media queries (also pseudo-classes and pseudo-selectors) inside inline styles. You need to extract your css into a sepparate .css file and to import it either inside your component's file (if you use bundlers like webpack) or just include it inside your html with <link> tag

Related

Can I use v-if with style tag to choose a different source file? Or is there a better alternative?

I tried doing the example below, but it would not work. The reason why I am trying to do this is is that I would have to add way too many modifiers (--tuned) to make this work. So I was trying to source the css file based on a condition. Why would this not work and does anyone know if there is a better alternative that a million modifiers ?
<style v-if="!isTuningActive" lang="scss" src="./normal-version.scss"></style>
<style
v-else
lang="scss"
src="./tuned-version.scss"
></style>
Why not separate into components? Each components with his own styling.
https://vuejs.org/guide/essentials/component-basics.html
You can compile your separate scss files into a single stylesheet (main.scss for example), then just import that main.scss file into your parent component (likely, App.vue).
This will allow you to simply switch the css class on your example above instead of trying to conditionally import stylesheets.
For example, lets say your new 'main.scss' file contains the following scss.
.tuned-version {
p { color: red }
}
.untuned-version {
p { color: blue }
}
Then you'll simply need to dynamically add the class depending on your isTuningActive property.
<div :class="isTuningActive ? 'tuned-version' : 'untuned-version">
<p>My content</p>
</div>
Helpful references:
Compiling scss in Vue: https://vue-loader.vuejs.org/guide/pre-processors.html#sass
Dynamic class binding: https://vuejs.org/guide/essentials/class-and-style.html#binding-html-classes

Recreating HTML/CSS Behavior with Styled-Components

I have a fairly annoying problem using Styled-Components in a React app. The class names of the HTML elements are very important, as is the dynamism of styled-components (via props passing). So it's important that both are used.
tl;dr I want to use a classname in CSS (and not HTML) without having to create an empty component or something.
I have a class with a dynamic classname, let's stay "style-123", where "123" is dynamically changed via state and is important for parity with the current setup. (IMO, the dynamic nature of the classname is preventing a solution.) The "style-123" classname is used in other HTML elements, but it is not a component itself so should not show up as an HTML element.
I have a component ("ComponentA") that has a classname of "component-a". This component's HTML should looking like the following:
<div class="component-a">
HELLO
</div>
and its Styles (in Dev Tools) should look like this:
.style-123 .component-a {
margin-left: -2%;
}
where we now see the class ("style-123") added. This should be the final result.
The general structure of the HTML is along the lines of:
<div class="name-whatever style-123 another-classname">
<div>
<div class="component-a">
</div>
</div>
</div>
Problem
I do not seem to be able to isolate "component-a" as an HTML classname for "ComponentA" while applying CSS as .style-123 .component-a via styled-components. In order for the HTML to have an isolated classname, the component (JSX) would need to be:
<ComponentA className={'component-a'}/>
and the styled component:
const ComponentA = styled.div`
&.component-a {
color: red;
}
`
This is the only way I know how to link-up a component in JSX with its styled-component counterpart.
I cannot do:
<ComponentA className={'component-a'}/>
and the styled component:
const ComponentA = styled.div`
&.style-123 .component-a {
color: red;
}
`
as this won't apply the styling since there's a classname-mismatch.
I've tried many combinations of SASS, all the ampersands and arrows and pluses and etc., over the last few hours. I hope this is feasible via styled-components as I need to declare classnames and have classnames dynamic as well as the CSS attributes and values, all passed via props. If there is another solution that doesn't use styled-components but maintains this dynamism, I am open to that.
Thanks for the time.

How can I use style tag in JSX

So I'm in a situation where I have to use <style> tag, That is because I have multiple pages (I'm using react router DOM) so I cant apply the same style to every page as that would mess things up. Is there a way I can use <style> tag in JSX?
I have to use style tag like this:
function RandomScreen(){
return (
<div>
<style></style>
</div>
)
}
You can simply import a stylesheet into your page:
import './main.css'
Another solution is to use Emotion and the Global component:
https://emotion.sh/docs/globals
Can you use separate css file for every component and import every css file in every component you need.
import './RandomScreen.css';

can I "import" React CSS modules from a string?

I have a React project that uses CSS Modules by importing .css files. e.g. import styles from "./styles/MyComponent.css";
I find myself now in a situation where a component is receiving a customized snippet of CSS as a string in response to a dynamic call to the server.
Is it possible to take this string (which is unknown until runtime) and essentially do the same thing to it that import does to the .css file when it is compiled by webpack?
For example:
import styles from "./styles/MyComponent.css";
//later on in component...
moreStyle = "a string containing valid CSS";
//do *something* here to moreStyle string to do whatever importing does to a file.
myJSX = (
<div className={styles.someClass}>
This div content is styled by someClass
</div>
<div className={moreStyle.someOtherClass}>
This div content needs to be styled by someOtherClass, but obviously this isn't working
</div>
);
You can try this:
import styles from "./styles/MyComponent.js";
myJSX = (
<div style={styles.someClass}>
This div content is styled by someClass
</div>
<div style={styles.someOtherClass}>
This div content needs to be styled by someOtherClass, but obviously this isn't working
</div>
);
Consider creating a serialized object, instead.
// Filename: MyComponentStyle.js
//Example styles
export const styles = {
someClass: { height: 10 },
someOtherClass: {
backgroundColor: 'red',
}
};
React doesn't work like your typical HTML/CSS/JS app. The thing to note that JSX may look like HTML but it is not HTML.
In your code, className is being defined as a string, which is expected, however, there's possibly no CSS being referred to in this document. Try to console.log it and see what you get.
...
Another possible solution is to simply have your style within the same component file. A common design choice for component styling is inline styling. This is especially useful for projects of medium-large scale, where managing files can get difficult.
Helpful references:
https://reactjs.org/docs/dom-elements.html#style
https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822

Polymer `<custom-style>`: which line of code stops appending to DOM multiple imports of the same custom-style template module?

My project's upstream web components theme is implemented as <custom-style> elements link
I want to implement my document level overrides as a JS module (as in, avoid hardcoding into app index.html or equivalent), which on surface looks simple:
import '#vaadin/vaadin-lumo-styles/color.js';
const $template = document.createElement('template');
$template.innerHTML = `
<custom-style>
<style>
html,
:host {
--lumo-primary-color: red;
}
</style>
</custom-style>`;
document.head.appendChild($template.content);
QUESTION
Some web components used in the document also import original theme via import '#vaadin/vaadin-lumo-styles/color.js'.
I want my overrides to always cascade last (without !important hacks).
Do multiple later import '#vaadin/vaadin-lumo-styles/color.js'; calls have any potential to revert my CSS custom property overrides cascade?
Think:
original: --lumo-primary-color: hsl(214, 90%, 52%);
me: import original, override --lumo-primary-color: red;
later: can a later import of original "reset" cascade back to --lumo-primary-color: hsl(214, 90%, 52%);)?
ES6 import a file in multiple place, why the file loads once? seems to imply maybe not, but I'm struggling finding any documentation that explicitly states something one way or another about <custom-style>.
Perhaps https://github.com/Polymer/polymer/blob/v3.2.0/lib/elements/custom-style.js#L80 is the key?
GLITCH
https://glitch.com/edit/#!/roan-pizza?path=src/index.js seems to confirm repeated imports don't seem to cause a problem, but why? Is it purely due to ES6 module load caching, or is there something else to it?
EDIT drag-n-dropping <custom-style> elements around in browser inspector definitely has an effect on the cascade (colors change based on tag order), so at least loading order is confirmed to matter.
Tips: remove all for edit.
difference tags (of <custom-style>) by #id => <custom-style id="id01">.
save <custom-style> to edit => save(#id).
red (in "--lumo-primary-color") is a variable => var color = red.
remove all content of a <custom-style id="id01"> => remove_all(#id).
add a new content you need => as you did above.
I just hope that you will solve your problem. You are better than me so I will not write code.

Categories