Defining inline style in React, SyntaxError: Unexpected token - javascript

While trying to disable scrolling on the page setting style='overflow-y: auto;':
render() {
return (
<div style={{overflow-y: auto}}>
<div>{this.props.title}</div>
<div>{this.props.children}</div>
</div>
);
}
Webpack is giving an error:
What could I do here? If we can not set overflow-y for some reason, then how could we disable scrolling of a web page in React app (I am also using React-Bootstrap)

The style attributes should be in camel case according to the documentation.
So anywhere we delimit the words with hyphen (-) in normal css we should use change them to camel case when we use it inside a react style object.
For example.
overflow-y -> overflowY
overflow-x -> overflowX
background-image -> backgroundImage
We insert the styles as an object.
so the css properties will be attributes of an javascript object.
hyphen(-) is an illegal character when defining javascript object attributes or variable names. That's why it should be used in camel-Case.

From the comments, use overflowY.

You cannot use <div style={{overflow-y: auto}}>
You have to convert it into camelCase like <div style={{overflowY: auto}}>
For details you can Check react official document
Here https://reactjs.org/docs/dom-elements.html#style

Related

Vue 2 - Styling HTML returned in a switch statement

I'm building a generic component supposed to receive various backend data. I wrote a switch. One condition is :
case 'Bases':
let bases = variant[tableName][colValue].map((base) => {
return `<div class="base b${base.strongestIndication}">${base.name}</div>`
})
return bases.join('')
I use v-html in my template, therefore in this case, we have 3 divs created, each with a class of "base" and then "b1", "b2", "b3". I can see on the webpage that these classes are properly set when I inspect the elements.
I've described in my style some rules for theses classes (mostly background-color, border-radius and so on), but they do not apply.
I'm guessing this might have something to do with the CSS being applied before these divs are created but I'm not sure of this.
What should I do to get these tags created by JS to be styled properly ?
(Also, I know using v-html can be dangerous, therefore if you have a better idea for this whole thing, I'm all ears)
There is no need to build the markup in component methods. Define it in template and bind the classes dynamically. Since you didn't post the api data structure, neither how you are using this snippet of code, I can only refactor the specific case.
<div
v-for="base in colValues"
:class="['base', `b${base.strongestIndication}`]">
{{base.name}}
</div>
Figured it out. For those wondering, switch statements returning html code aren't styled if the tag in your file is scoped. Unsure why, but removing scoped work. If you decide to do so, but unique class names, as these styles will spread all throughout the application !

Problem with arbitrary values on Tailwind with React

I'm trying to make a react component that changes the width from a parameter but it's doesn't work and I don't know why.
function Bar() {
const p =80
const style = `bg-slate-500 h-8 w-[${p.toFixed(1)}%]`
console.log(style)
return (
<div className=' h-8 w-full'>
<div className={`bg-slate-500 h-8 w-[${p}%]`}>
</div>
</div>
)
}
export default Bar
With this code I get a full-size bar, but if I use a strict String with 80.0 it works fine
The other answers are wrong. In Tailwind V3 JIT is included and you won't need to set mode to jit anymore. And even in Tailwind V2 the posted code wouldn't work.
Following the docs, you must avoid string interpolation and use complete class names.
This is wrong:
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
Instead use Complete class names:
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
What about using inline styles?
You may be tempted to use inline styles, but remember Content Security Policies are increasingly under scrutiny to disallow unsafe inlines. Any inline style or script could in theory be injected with unintended content. Furthermore, the whole point to Tailwind is to generate CSS at build time, so you'd be working around it and might as well not even be using it in this case.
in tailwind.config.js add mode: 'jit'.
I would suggest https://v2.tailwindcss.com/docs/just-in-time-mode to learn more.
e.g:
module.exports = {
//other options
mode: 'jit',
}
I ran into a similar issue building a site with Astro & Tailwind.
The solution I discovered was to use the 'safelist' feature that allows you to define certain classes that will be force-compiled, regardless of whether or not they are found when scanning the specified content locations in the tailwind.config.cjs file.
An example of the code I used to fix my situation:
module.exports = {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
Adding a safelist and classes to it:
safelist: ["lg:grid-cols-[1fr_4fr]", "lg:grid-cols-[1fr_3fr_1fr]"],
...
Here's a link to the relevant area in the Tailwind documentation.
If your p's value is a constant that will be used across the app, you can instead define it in your tailwind.config.js file like this.
theme: {
extend: {
spacing: {
"p-value": "80%",
},
},
}
Then you can modify your code to this.
<div className="bg-slate-500 h-8 w-p-value">
Include mode: 'jit' in tailwind config file

How to use a dynamically evaluated angulajs class and append it to the div?

I currently have this (in jade)
div(ng-class = "{'{{cardselector.products[0].imageCarousel}}':
cardselector.products[0].imageCarousel != null}")
When the page loads and the imageCarousel object is updated and then I expect it to add the class evaluated to the div but that's not happening. It's only evaluating the class but not adding it to the div.
Could anyone help?
With my understanding of Pug, what you're doing is setting the class on your div to ng-class, what you want is to set the attribute ng-class to your value.
This could be accomplished by the following:
div(ng-class="{'{{cardselector.products[0].imageCarousel}}': cardselector.products[0].imageCarousel != null}")
To set the class to the value of the variable
div(ng-class="cardselector.products[0].imageCarousel")
I used Teh's plunkr to show what I mean.
https://codepen.io/anon/pen/xLEobm
Note: I'm still unsure of when you're compiling through angular, so it still might not render if your template is interpreted after angular compiles.
The following jade (pug) code seems to be working:
div(ng-app='')
div(ng-controller='MyCtrl')
div(ng-class='[cardselector.products[0].imageCarousel]') Hello!
Demo: https://codepen.io/anon/pen/gxwyKj

Error with place holder on jsx

I have a simple react HTML input component and as it used on different sections/pages, I added some props for styling it and its placeholder. The problem is that sometimes I got an error on the compilation(we are using nextjs).
This the code:
{placeHolderColor && (<style jsx>{`input::placeholder{color:${placeHolderColor}}`}</style>)}
Basically, I'm using an inline If with Logical && Operator inside the render function to check if the prop placeHolderColor exists, and if exist add the style tag.
The error I'm getting:
Warning: Unknown prop jsx on tag. Remove this prop from the element.
The error only occurs when you reload the page. If you made a change and the hot code reloading run, there is no error. Not sure if the problem is the var inside the literal, the '::placeholder' pseudo-element or what. The code works anyway, and if the placeHolderColor var is defined the style is applied.
When I tested your code I got the same error(also on page load). After that I talked to a styled jsx dev with nickname #g (on github #giuseppeg) on ZEIT's #next slack channel https://zeit.chat/ and he confirmed that the conditional use of <style jsx> tag is not supported. Here is his explanation https://github.com/zeit/styled-jsx/issues/233.
Also, after removing conditional and just inserting your tag like this:
<style jsx>{'input::placeholder{color:${placeHolderColor}}'}</style>
I've got this error:
Module build failed: SyntaxError: Expected placeHolderColor to not come from the closest scope.
Styled JSX encourages the use of constants instead of props or dynamic values which are better set via inline styles or className toggling. See https://github.com/zeit/styled-jsx#dynamic-styles.
According to recommendations from https://github.com/zeit/styled-jsx#dynamic-styles, you basically should not add dynamic values into template literals inside <style jsx> tag (though you can put there constants and constant expressions starting from version 1.0.4 (see UPDATE at the bottom of the answer for details)). The reason behind the prohibition of using props/dynamic values, according to #giuseppeg comment in the slack thread https://zeit-community.slack.com/archives/C2U01UYEA/p1496928897076534, is following: "at the moment styled-jsx compiles and produces static code and therefore the hashes that make the final CSS unique won't change when the value of a variable like color changes"
So, as you see from documentation, it is recommended to use dynamic values via inline styles or className toggling. Unfortunately, styling pseudo-elements (placeholder etc.) in not possible via inline styles in React, so if you have finite number of possible colours then create a class for each colour case and use it like this:
const InputWithColouredPlaceholder = props => (
<div>
<input
placeholder="text"
className={
'placeholderColourClass' in props && props.placeholderColourClass
}
/>
<style jsx>{`
.reddy::placeholder {
color: red;
}
.greeny::placeholder {
color: green;
}
`}</style>
</div>
);
and render it like <InputWithColouredPlaceholder placeholderColourClass="reddy" />
It gets more complicated in case of large range of possible colours though. In this case I would recommend to ask for suggestions in #next channel on ZEIT's slack https://zeit.chat/.
UPDATE
Using constants and constant expressions in template literals should work in styled-jsx 1.0.4 (but nextjs currently depends on 1.0.3, and separate installation of styled-jsx will not help, so wait for update of nextjs to support styled jsx 1.0.4). It means that any constants that are not passed trough props and not created inside component should work (for example you can have a js file with constants for colours and import them into your input component). But it does not fit your case because you need a dynamic way.
I got error Warning: Unknown prop 'jsx' on <style> tag. Remove this prop from the element. For details, see FB react-unknown-prop. What does that jsx property in your style tag means? Just remove it?

Accessing CSS custom variable with Javascript

I have as the following style in a css file
#galleryImages{
position:absolute;
top:24px;
left:41px;
width:900px;
moving:false;
}
When I try to access it through Javascript, it returns undefined
The external css is correct, it returns other style variables properly as well as the getElementById
alert("External: " + document.styleSheets[0].cssRules[2].style.moving +
"\nInternal: " + document.getElementById("galleryImages").style.moving);
It gives an alert with:
External: Undefined
Internal: Undefined
Is there a way to access a custom CSS variable through javascript?
Thank you in advance
Most (all?) browsers won't load unknown CSS into the DOM, and JavaScript cannot directly access CSS styles directly, only the ones that are loaded into the DOM.
The only way I can think of would be to implement your own CSS parsing JavaScript, but for the mostpart, that would probably be excessive for what you want to do, and a pure JavaScript solution or a class value would better.
e.g. In HTML
<div class="moveable"></div>
Using that example, you could use your JavaScript to get the classname of the element, and if it has the "moveable" class, you know it can move.
EDIT:
In #Anurag's posted link to the Mozilla bug, it is mentioned that unknown CSS properties are to be ignored as part of the CSS 2.1 specification.

Categories