My index.js for React, I used a create-react-app starter project.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
My app.js includes:
import './App.css';
and I use the CSS:
.body {
background-color: "green"
}
and the body does not change to green.
How do I modify CSS? I also tried placing app.css into public/app.css and loading with link rel="stylesheet" Element inspector still showed no effect.
Element inspector shows margin of 8px on body element from "user agent stylesheet".. nothing from my loaded css.
EDIT:
I also try inline style tag:
<!doctype html>
<html lang="en">
<script src="web3.js"></script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>CryptoClicker</title>
</head>
<body>
<div id="root"></div>
</body>
<style>
.body {
background: "green";
}
</style>
</html>
no effect.
You're using .body which is looking for elements with the class 'body' - as there's a . Change that to body (with no .) and it'll style the body element rather than the class.
Also, named colours in CSS are not variable strings - so remove the quotes:
body {
background: green;
}
It'd be worth putting your styles back into App.css and importing it in JS rather than using the <style> tags.
Related
I need to add a Vue Web Component to improve the UI of a Server Side application.
I created the following simple application:
<script>
export default {
data() {
return { greeting: 'Hello World!'}
}
}
</script>
<template>
<p class="greeting">{{ greeting }}</p>
</template>
<style>
.greeting {
color: red!important;
}
</style>
Then I added the following to my javascript:
import { defineCustomElement } from 'vue'
import hello from './hello.component.vue'
customElements.define('v-hello', defineCustomElement(hello));
I build it using Parcel and did not get any error.
I run it and, in the browser, I see "Hello World!" but the red color is not applied.
I inspected the page source in the browser and I have:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home page</title>
<link rel="stylesheet" href="/index.css">
</head>
<body>
<v-hello>
Shadow Content (Open) = $0
<p class="greeting" data-v-c566f4="">Hello World!</p>
</v-hello>
<script src="/index.js" type="text/javascript" defer=""></script>
</body>
</html>
When I check Index.css I find the style:
.greeting{color:red!important}
Why isn't the red color style being applied?
I tried in Safari, Google Chrome and Safari.
I'm inspecting https://ionicframework.com/docs/api/alert alert..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alert</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#ionic/core/css/ionic.bundle.css"/>
<style>
:root {
--ion-safe-area-top: 20px;
--ion-safe-area-bottom: 22px;
}
</style>
<script type="module">
import { alertController } from 'https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/index.esm.js';
window.alertController = alertController;
</script>
</head>
<body>
<ion-app>
<ion-header translucent>
<ion-toolbar>
<ion-title>Alert</ion-title>
</ion-toolbar>
</ion-header>,
<ion-content fullscreen class="ion-padding">
<ion-alert-controller></ion-alert-controller>
<ion-button expand="block">Show Alert</ion-button>
</ion-content>
</ion-app>
<script>
const button = document.querySelector('ion-button');
button.addEventListener('click', handleButtonClick);
async function handleButtonClick() {
const alert = await alertController.create({
header: 'Use this lightsaber?',
message: 'Do you agree to use this lightsaber to do good across the galaxy?',
buttons: ['Disagree', 'Agree']
});
await alert.present();
}
</script>
</body>
</html>
There is an element there with .alert-wrapper class on it.
if you'll look at the applied CSS, it will show you opacity: 0, but the computed shows opacity: 1
I tried removing all the CSS Files from the page, all the javascript, all the other elements
I tried to move this element to the body (outside the iframe) and applying the opacity: 0 in the styles, nothing helps, the computed stays opacity: 1..
How is this possible?
They are using the Web Animations API.
elem.animate([{ opacity: "1" }],{duration: 1, iterations: 1, fill: "forwards"});
#elem {
opacity: 0;
}
<div id="elem">Hello</div>
I think you already know this but have you tried using - !important
The initial value of opacity is - 1.0
Inherited - no
Computed value -> the specified value, clipped in the range [0,1]
source - MDN
I know about this method of injecting CSS:
import Head from 'next/head'
export default function Home() {
return (
<div className="container">
<style jsx global>{`
body {
margin: 0;
}
`}</style>
<Head>
<title>audiom</title>
<link rel="icon" href="/favicon.ico" />
</Head>
</div>
)
}
But is there a way to quickly insert a css file (css reset in my case)?
You can import reset.css in _app.jsx file, it will apply css reset styles for all pages.
_app.tsx
import '../styles/reset.css';
I have a very simple project in NextJs. I want to serve the files via NginX
These are my dependencies.
"dependencies": {
"isomorphic-unfetch": "^2.0.0",
"next": "^7.0.2",
"next-routes": "^1.4.2",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"semantic-ui-react": "^0.80.2"
}
My routes js
const routes = require('next-routes')();
module.exports = routes;
I have a common layout for entire application as shown here. Note the style jsx
import React from 'react';
import { Container } from 'semantic-ui-react';
import Header from '../components/header';
import Head from 'next/head';
const Layout = (props) => {
return(
<Container style={{margin:'30px', 'backgroundColor':'#fff','borderRadius': '5px'}}>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>
<meta charSet="utf-8" />
<style jsx global>{`
body {
background: #202020;
font: 11px;
}
div.container {
margin: 30px;
padding-bottom: 2px;
}
`}</style>
</Head>
<Header />
<div className='container'>
{props.children}
</div>
</Container>
);
};
export default Layout;
All other pages would use this layout.
render() {
return(
<Layout>
<div>
my app
</div>
</Layout>
);
}
With Dev server, layout's styled jsx is getting applied properly. everything works just great.
If i do, npm run build & export and use the out content for static hosting, styled jsx is completely missing.
I also found that the out directory has index.html which is NOT serving the css. If use the index/index.html css is fine.
Again what is the right approach?
You need to put the <style jsx> tag outside <Head>. Basically all styled-jsx styles need to be a children element of the root.
Here's the working example
Simply download it (by clicking at the middle-top-left - there is a button to download).
<Container>
<Head>
...
</Head>
<div className="container">{props.children}</div>
<style jsx global>{`
body {
background: #202020;
font: 11px;
}
container {
margin: 30px;
padding-bottom: 2px;
}
`}</style>
</Container>
Here's some other useful info about styled-jsx that might help you better manage the styles:
Dynamic Styles
External Styles
Styles outside components
Also take into account that styled-jsx is not the only CSS-in-JS library out there. I personally prefer styled-components, you should check it out. Here's an example on how to implement it with Next.js.
Cheers
I am trying to style the paper-drawer-panel using the Custom CSS Mixins as mentioned here. The paper-drawer-panel.css file applies
#apply(--paper-drawer-panel-left-drawer-container);
#apply(--paper-drawer-panel-main-container);
respectively for the drawer and the main containers. But, the styles set using the mixins do not seem to be working
The below is the code for paper-drawer-panel demo I have used.
<html>
<head>
<title>paper-drawer-panel demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="stylesheet" href="bower_components/paper-styles/demo.css">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<style>
#drawerPanel {
--paper-drawer-panel-left-drawer-container: {
background-color: #eee;
};
--paper-drawer-panel-main-container: {
background-color: gray;
};
}
</style>
</head>
<body class="unresolved fullbleed">
<paper-drawer-panel id="drawerPanel">
<div drawer>
<div>Drawer content... </div>
</div>
<div main>
<div>
<paper-button paper-drawer-toggle raised>toggle drawer</paper-button>
</div>
</div>
</paper-drawer-panel>
</body>
</html>
The documentation over at https://elements.polymer-project.org/elements/paper-drawer-panel states that this is valid too.
Styling paper-drawer-panel:
To change the main container: paper-drawer-panel {
--paper-drawer-panel-main-container: { background-color: gray; }; }
To change the drawer container when it's in the left side:
paper-drawer-panel { --paper-drawer-panel-left-drawer-container: {
background-color: white; }; }
So, what am I doing wrong in trying to get this simple thing working?
I am also testing the new styling schema of Polymer 1.0. It seems that you need to add is="custom-style" to the style tag.