I am facing difficulty importing emotion js style using dynamic variables

I recently designed a webpage that has the following appearance:
https://i.stack.imgur.com/AnIXl.jpg

Here is the code from my _app.tsx file:

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { createTheme } from '@arwes/design'
import { ThemeProvider, Global, css } from '@emotion/react'
import { globalStyles } from '../shared/styles.js'

function MyApp({ Component, pageProps }: AppProps) {
  const theme = createTheme();
  return (
    <ThemeProvider theme={theme}>
      {globalStyles}
      <div style={{
          marginBottom: theme.space(2),
          borderBottom: `${theme.outline(2)}px solid ${theme.palette['primary'].main}`,
          padding: theme.space(2),
          backgroundColor: theme.palette.neutral.elevate(2),
          textShadow: `0 0 ${theme.shadowBlur(1)}px ${theme.palette['primary'].main}`,
          color: theme.palette['primary'].main
      }}>
        Futuristic Sci-Fi UI Web Framework
      </div>

      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp

Additionally, here is the content of shared/styles.js:

import { css, Global, keyframes } from '@emotion/react'
import styled from '@emotion/styled'

export const globalStyles = (
  <Global
    styles={css`
      html,
      body {
        margin: 0;
        background: papayawhip;
        min-height: 100%;
        font-size: 24px;
      }
    `}
  />
)

export const blueOnBlack = (theme) => css`
  marginBottom: ${theme.space(2)};
  borderBottom: ${theme.outline(2)}px solid ${theme.palette['primary'].main};
  padding: ${theme.space(2)};
  backgroundColor: ${theme.palette.neutral.elevate(2)};
  textShadow: 0 0 ${theme.shadowBlur(1)}px ${theme.palette['primary'].main};
  color: ${theme.palette['primary'].main};
`

An interesting point to note is that blueOnBlack serves as an attempt to encapsulate the style for the 

Futuristic Sci-Fi UI Web Framework
into a reusable variable.

However, when I tried to integrate blueOnBlack into the styling of the 

Futuristic Sci-Fi UI Web Framework
div tag in the _app.tsx file, it did not work as expected.

The updated _app.tsx file with the imported blueOnBlack looks like this:

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { createTheme } from '@arwes/design'
import { ThemeProvider, Global, css } from '@emotion/react'
import { globalStyles, blueOnBlack } from '../shared/styles.js'

function MyApp({ Component, pageProps }: AppProps) {
  const theme = createTheme();
  return (
    <ThemeProvider theme={theme}>
      {globalStyles}
      <div style={blueOnBlack(theme)}>
        Futuristic Sci-Fi UI Web Framework
      </div>

      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp

After making these adjustments, the resulting webpage now appears like this,
https://i.stack.imgur.com/Z1hq2.jpg

Everything seems correct, except for the missing background color. What could be causing this difference?

javascriptcssreactjsnext.jsemotion

Answer №1

I made a modification to shared/styles.js as follows:

import { css, Global, keyframes } from '@emotion/react'
import styled from '@emotion/styled'

export const globalStyles = (
  <Global
    styles={css`
      html,
      body {
        margin: 0;
        background: papayawhip;
        min-height: 100%;
        font-size: 24px;
      }
    `}
  />
)

export const blueOnBlack = (theme) => css`
  marginBottom: ${theme.space(2)};
  borderBottom: ${theme.outline(2)}px solid ${theme.palette['primary'].main};
  padding: ${theme.space(2)};
  backgroundColor: ${theme.palette.neutral.elevate(2)};
  textShadow: 0 0 ${theme.shadowBlur(1)}px ${theme.palette['primary'].main};
  color: ${theme.palette['primary'].main};
`

The update I implemented resulted in the following code:

import { css, Global, keyframes } from '@emotion/react'
import styled from '@emotion/styled'

export const globalStyles = (
  <Global
    styles={css`
      html,
      body {
        margin: 0;
        background: papayawhip;
        min-height: 100%;
        font-size: 24px;
      }
    `}
  />
)

export const blueOnBlack = (theme) => styled.div={
  marginBottom: theme.space(2),
  borderBottom: theme.outline(2) + 'px solid' + theme.palette['primary'].main,
  padding: theme.space(2),
  backgroundColor: theme.palette.neutral.elevate(2),
  textShadow: '0 0 ' + theme.shadowBlur(1) + 'px ' + theme.palette['primary'].main,
  color: theme.palette['primary'].main
}

After running this new version of the code, I achieved the desired styling effect, including the appearance of black background on the text. It's worth noting that I utilized styled.div instead of css

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

What is the best way to customize Node.js configuration when it is executed through npm?

Check out this documentation on node config: node myapp.js --NODE_CONFIG='{"Customer":{"dbConfig":{"host":"customerdb.prod"}}}' However, if I run a npm script, all parameters will be passed to npm instead of nodejs, right? How can I pass the -- ...

javascriptnode.jsnpmnpm-config

Is it possible to close the menu by clicking outside a div or letting it disappear on mouseout after a set period of time?

When visiting a website, you may notice menus that display sub-menus when hovered over. These menus and sub-menus are created using div elements, with the sub-menus hidden initially using style.display = none; The issue arises when a sub-menu is opened an ...

javascriptjqueryjsonhtmlcss

Is browserHistory.push ineffective in react.js?

I am currently working on a React ecommerce website. I have encountered an issue in the login component where, upon clicking the submit button on the form, the system is supposed to check if the user is authenticated using useEffect. If the user is authent ...

javascriptnode.jsreactjsmongodb

How can I troubleshoot the overflow-y problem in a tab modal from w3 school?

https://www.example.com/code-sample overflow: scroll; overflow-y: scroll; When I type a lot of words, they become hidden so I need to use overflow-y=scroll. Despite trying both overflow: scroll; and overflow-y: scroll;, I have been unable to achieve the ...

javascripthtmlcss

How should a React Testing Library wrapper be properly typed in a TypeScript environment?

There's this code snippet from Kent C. Dodd's library that I find extremely helpful import * as React from 'react' import {render as rtlRender} from '@testing-library/react' import {ThemeProvider} from 'components/theme& ...

reactjstypescriptreact-testing-library

Embedding a CSS file into a PHP class

I've encountered a little issue that I can't seem to solve on my own. I've put together a "webengine" using multiple classes. The primary class responsible for obtaining a theme's internals is called "Logic". This Logic class contain ...

phphtmlcss

Managing state arrays in React JS: A guide to efficiently adding and removing items using a single function

Using React JS Class Component. Within a single function, I am attempting to... Add an integer value to an array if it is not already in the array and also remove a value from the array if it does exist. Note that initially the array will be empty [] My ...

reactjsarrays

Create a polling feature using a Grease Monkey script

I am looking for a way to run a Tamper Monkey script on a Facebook page that regularly checks a database for new data and performs certain actions. I have attempted to implement polling using AJAX, and below is the code I used: (function poll() { setT ...

javascriptajaxxmlhttprequestpollinggreasemonkey-4

Encountering issues with resolving dependency tree post updating node, specifically with node-sass dependency causing failure

Following the update to the latest version of Node.js, I encountered error messages when attempting to use npm audit fix --force. It appears that resolving dependency tree issues is proving to be difficult. Despite extensive research and trying various s ...

javascriptnode.jsnpmnode-sass

An easy way to incorporate a Ternary Operator into a class using just one classname

className="app__header app__flex" className={darkMode ? "dark-mode" : "light-mode"} I'm trying to merge these two class names together className={"app__header app__flex" + {darkMode ? "dark-mode" : ...

reactjsconditional-operator

Is there a way to allow an HTML page rendered by node.js to communicate back to its corresponding node.js file?

I am currently in the process of developing a registry system using node.js and HTML. However, I have encountered an issue where my HTML page is rendered by node.js, but when trying to call it back to the node.js file, it appears that the JS file cannot be ...

javascripthtmlnode.jsazure-sql-database

Encountered an error: Incorrect decomposition attempt on a non-iterable object

I have implemented a DataTable component using react-table. Below is the code for my component: const DataTable: React.FC<IDataTable<any>> = (props: IDataTable<any>) => { const { columns, data, className, rowSelection, onChange, ...r ...

javascriptreactjs

Encountered an issue while trying to access the length property of an undefined value within an aside

I am currently utilizing ng-strap's modal, alert, and aside features. Each of them is functioning properly on their own, but when I attempt to place an alert or modal inside an aside, it throws the following error: Uncaught TypeError: Cannot read p ...

javascriptangularjsmodal-dialog

What is the inner workings of CSS?

I'm curious about the inner workings of CSS. Does the HTML get interpreted before CSS, or vice versa? Or does it all apply as soon as the browser has constructed the DOM? I would appreciate a detailed explanation on this topic. ...

css

Trouble with ReactJS render not reflecting changes in get function

Recently, I made some updates to the authentication process on my server for my single-page express/react app. However, when running the express server, I noticed that the updated .get function was not being served by my app. Do you have any ideas on why t ...

node.jsreactjsexpress

Getting the ID of an element in ReactJS following a POST request

I am looking to implement a function that creates an entry in a database using data collected from a basic form. Once the user clicks on submit, this function is triggered: createItem(item){ this.state.bucket_list.push({ name: item, ...

reactjsexpress

List of different components in VueJS

After numerous failed attempts to find the specific solution I need, it seems that my search has been in vain. Nevertheless, here is the query: Imagine I have an array of objects containing a title field and an input type field, among other parameters. Wh ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Fixed position toolbar within a container positioned beside a dynamically sized sidebar navigation

I'm trying to figure out how to create a fixed toolbar that fills the remaining width of the page when a side nav is collapsible. Setting the width to 100% causes it to overflow the page due to the dynamic nature of the side nav. Using calc() isn&apos ...

javascripthtmlcss

"Is it possible to apply CSS to all HTML elements except for a

I am looking to apply the specified styles to all elements except for a particular class and its descendants. html * { box-shadow: none !important; border: none !important; color: white; } I attempted the following but it did not work as intended: ht ...

htmlcss

Troubleshooting a JavaScript error while attempting to execute a function from a

I have been working on a new JavaScript library named TechX. Check out the code snippet below: (function(){ function tex(s){ return new tex.init(s); }; //initiate the init selector function tex.init = function(s ...

javascript