Developing a custom CSS for React using clamp and focus attributes

I'm currently working on creating an object to be used in inline style, but I'm having trouble figuring out how to correctly write `clamp` and `after`.

const PhoneInputStyle = {
    fontSize: clamp("13px", "1.111vw", "16px"),   /*this particular line is causing issues
    lineHeight: clamp("15px", "1.319vw", "19px"), */
    position: "relative",
    width: "100%",
    height: "51px",
    cursor: "pointer",
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    padding: "8px 16px",
    border: "1px solid ${COLOR_NOT_BLACK}",
    boxSizing: "border-box",
    borderRadius: "10px",
    outline: "none",
    &:focus {                                           /*this particular line is causing issues
        border: "1px solid ${COLOR_SALMON} !important",
    }                                                   */
    gridRowStart: "1",
    gridColumnStart: "1"
}

The error message I am encountering for `clamp` is : `Cannot find name 'clamp'`

Regarding `focus`, the issue is that it's showing: `Expression expected` (especially on the `&` symbol).

javascripthtmlcssreactjs

Answer №1

Ensure the entirety is converted into a string such as: 

{fontSize: "clamp(13px, 1.111vw, 16px)"}

As for focusing, consider utilizing this resource: https://styled-components.com/

-update-

One option could be to establish a wrapper component with an onHover event handler.

Here's a sample implementation...

<div
  style={isShown ? {border: "1px solid ${COLOR_SALMON}"}: ""}
  onMouseEnter={() => setIsShown(true)} 
  onMouseLeave={() => setIsShown(false)}
>
  {children}
</div>

This approach may even function effectively without necessitating a separate wrapper component.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to update a useState in TabPanel without causing a re-render?

For the past few months, I've been immersing myself in React and MUI. Recently, I encountered a problem that has me stumped. The Goal: I receive data from a backend and need to display it for users to edit before sending the changes back to the serv ...

javascriptreactjsmaterial-ui

Saving compiled babel files to the corresponding directory level

Is there a way to output compiled babel files in the same directory as the source files? Currently, my script generates the compiled files in a separate folder while maintaining the folder structure. This is achieved through the following code snippet in m ...

javascriptreactjsnpm

Retrieving attribute of a span element inside a nested div

Newbie to web scraping and facing an issue. I am trying to extract the value of data-value from the span with class "DFlfde SwHCTb". However, I keep getting an undefined return. Can someone point out what error I made in the code below? const axios = requi ...

javascriptnode.jsweb-scrapingcheerio

Understanding the sequence of operations in Javascript using setTimeout()

If I have the following code: function testA { setTimeout('testB()', 1000); doLong(); } function testB { doSomething(); } function doLong() { //takes a few seconds to do something } When I run testA(), what happens after 1000 mill ...

javascriptexecutionmultiple-browsers

The capacity to rotate div containers, adjust their dimensions, and engage with the content within

I'm attempting to design small clickable div boxes that flip 180° when clicked to reveal interactive content. This includes the ability to click links, copy text, or manipulate the content with additional buttons. Although I've successfully ach ...

javascripthtmlcss

Angular loop is unable to detect changes in the updated list

My Angular application is facing a peculiar issue that I can't seem to figure out. // Here are the class attributes causing trouble tenants: any[] = []; @Input() onTenantListChange: EventEmitter<Tenant[]>; ngOnInit(): void { this. ...

javascriptnode.jsangulartypescripteventemitter

Oops! An error has occurred: The requested method 'val' cannot be called on an undefined object

I am struggling with this issue. This is the code that I am currently working on: http://jsfiddle.net/arunpjohny/Jfdbz/ $(function () { var lastQuery = null, lastResult = null, // new! autocomplete, processLocation = function ...

javascriptjquery

Utilize the composition API in Vue.js 3 to call a function and pass in a parameter

I'm having trouble calling a function from another component. When I click on a button in my parent component, formTelemarketing(), it should send data to my other component nAsignedCalls() and call the function getCalls(param) in that component. Thi ...

javascriptvue.jsvuejs3

Refreshing Data on Vuetify Range Slider

My goal is to update the value as the slider position changes. [codepen]https://codepen.io/JakeHenshall/pen/WLezNg <div id="app"> <v-app id="inspire"> <v-card flat color="transparent"> <v-subheader>Tick labels</v-subheade ...

javascriptvue.jsvuejs2

Using jQuery to fetch and display content from an external webpage

Is there a more effective method for loading an external web page on the same server? I've experimented with .load() and .get(), but they only load the page after the PHP script is finished. I've also used an iFrame, which displays the informatio ...

javascriptjqueryajaxiframeload

Analyzing Compatibility and Ensuring Security

I recently started using Parse and have been exploring the documentation and answered questions. However, I still have a couple of inquiries on my mind. Firstly, I discovered that the Javascript SDK does not function on IE9 and IE8 without an SSL certific ...

javascriptrestsslparse-platform

Tips for troubleshooting `create-react-app`s using Visual Studio Code

I have tried various suggestions from different sources to fix the issue with the vscode debugger not working properly. Unfortunately, the breakpoints never become active ...

node.jsreactjsvisual-studio-codecreate-react-appreact-scripts

Increase the value by one of the number enclosed in the <h3> element

I have a variable number of <h3> tags with the same class .love_nummer <h3 class="love_nummer">1</h3> Each of these tags contains a number, and alongside each .love_nummer tag is another tag with the class .give_love <h3 class="give ...

jqueryhtmlnumbers

Listening for button clicks in a Bootstrap drop down menu using JavaScript

I'm struggling to figure out how to detect button clicks in a drop-down menu. I've tried using Array.from to assign an event listener to each button in the drop-down, but it doesn't seem to work efficiently. It feels inefficient to assign in ...

javascriptjquerybootstrap-4

My CSS is giving me a bit of trouble with alignment

I have been experimenting with various approaches such as adjusting the size of the divs to tiny dimensions and trying out inline-block or float left and right properties, but I am still unable to achieve the desired result of having my divs positioned s ...

htmlcssweb

Design a sophisticated background using CSS

I am wondering if there is a way to create a CSS3 background similar to the one shown in the image link above. The gradient should smoothly transition from white to black, spanning across a header div, and remain consistent regardless of screen width (alwa ...

htmlcss

Error: AngularJS: Invalid Argument Error. The argument 'ClientCtrl' is not defined as a function, it is currently undefined

As a newcomer to AngularJS, I am facing an issue while trying to add a controller to my website. Strangely, the other two controllers are functioning perfectly fine, but this particular one is not being recognized. Here is my app.js file: var app = angul ...

javascripthtmlangularjsangular-controller

Is there a way to retrieve the dynamically generated text content of an element using document.write?

I am encountering an issue similar to the following: <div id="myDiv"><script>document.write('SOMETHING');</script></div> My goal is to extract the content inside the script tag, which in this case is "SOMETHING" ...

javascriptjquery

Error: The parent container element cannot be edited until the child element has been properly closed

I received a Script Error stating that I am unable to modify the parent container element before the child element is closed. In response, I clicked Yes but my web page isn't being displayed. In the code for my Product page, I start with: http://past ...

javascriptjqueryyuiyahoo-api

Why does my ajax request show the result in the php file rather than redirecting to the html page?

I've developed a series of AJAX functions that retrieve data from a PHP file. However, one of the functions redirects to the PHP file to fetch data but fails to return to the HTML page for data insertion. Here is the code used to fetch a table from a ...

phphtmlajax