I have a ClassName="logo" that I would like to use to style the logo in the component file. Having no joy thus far. Am I missing something here?
Index file, location the footer will display:
import React from "react"
import Header from "../components/header"
import Hero from "../components/hero"
import Footer from "../components/footer"
export default () => (
<>
<Footer></Footer>
</>
)
Footer css file:
#import "../styles/global.scss";
.footer {
background-color: $black;
color: $white;
height: 230px;
text-align: center;
.logo {
height: 20px;
}
}
Footer.js file:
import React from "react"
import footerStyles from "./footer.module.scss"
export default ({ children }) => (
<>
<div className={footerStyles.footer}>
<img className="logo" src="/svgs/logo_white.svg" alt="logo text"></img>
</div>{children}</div>
</>
)
Related
I used the webpack create-react-app with npx. I have a component I saved in the src directory, header.css, and Header.js. It seems that the css file is not working as intended, it is not styling my component. I have the following component structure.
header.css:
.header {
box-sizing: border-box;
width: 100%;
display: flex;
justify-content: center;
align-items: baseline;
padding: 1em;
margin-bottom: 2em;
background-color: rgb(192,45,26);
color: #fff;
}
Header.js:
import React from 'react';
import './header.css';
function Header()
{
return (
<div>
<h1>VACCINE</h1>
</div>
);
}
export default Header;
Any help would be appreciated, I followed the following thread but it didn't seem to work:
CSS modules not working for react version 16.6.0
You've successfully imported the css file, which is step 1. Step 2 is actually using the styles found within. Just apply a class to your div header:
import React from 'react';
import './header.css';
function Header()
{
return (
<div className="header">
<h1>VACCINE</h1>
</div>
);
}
export default Header;
I'm using version 2 of vue and #egoist/vue-emotion for styling my jsx components. I want to add a feature that user can change the background color of my application globally but I don't know how to do it.
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import { styled } from '#egoist/vue-emotion'
import {CustomInput} from './components/CustomInput'
import { createGlobalStyle } from '#egoist/vue-emotion'
const Container = styled('div')`
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
`
const GlobalStyle = createGlobalStyle`
body {
background: {{inputValue}};
}
`
#Component({
components: {
CustomInput,
Container,
GlobalStyle
},
})
export class App extends Vue {
inputValue = 'black'
render() {
return (
<div>
<GlobalStyle/>
<Container>
<CustomInput />
</Container>
</div>
)
}
}
I want you to help me that how can i access my data variable so when it changes I change my style state.
My react file isn't picking up my external styles.css
index.js :
import React from "react";
import ReactDOM from "react-dom";
import "./css/styles.css";
ReactDOM.render(
<div>
<h1 className="upper-deck"> Hello world </h1>
</div>,
document.getElementById("root")
);
styles.css:
.App {
font-family: sans-serif;
text-align: center;
}
.upper-deck {
font-size: "90px";
}
Project folder format :
Don't use quotes for scaler values in CSS. Remove the quotes around the pixel value for the font size.
.upper-deck {
font-size: 90px;
}
I'm trying to make my first React Project for a school task.
I started to with npm install -g create-react-app then create-react-app my-app.
I added some html to the app and that works great in the browser. Now I have created a button.js file and a button.css file.
I can't see any changes that I do in the button.css file.
Is it something wrong on the code or do I need to add something more to get the css work?
src/App.js
import React, { Component } from "react";
import './App.css';
import Button from './components/Button';
class App extends Component {
render() {
return (
<div className="App">
<div className="calc-wrapper">
<div className="row">
<Button>7</Button>
<Button>8</Button>
<Button>9</Button>
<Button>/</Button>
</div>
</div>
);
}
}
export default App;
src/compontents/Button.js
import React, { Component } from "react";
import './Button.css';
class Button extends Component {
render() {
return (
<div className="button">
{this.props.children}
</div>
);
}
}
export default Button;
src/componentes/Button.css
.button {
display: flex;
height: 4em;
flex: 1;
justify-content: center;
align-items: center;
font-weight: lighter;
font-size: 1.4em;
background-color: #e0e1e6;
color:#888;
outline: 1px solid #888;
}
Since you used the lowercased button, it is interpreted as the normal <button> element instead of your <Button> component.
Your App.js should look like this.
import React, { Component } from "react";
import "./App.css";
import Button from "./components/Button";
class App extends Component {
render() {
return (
<div className="App">
<div className="calc-wrapper">
<div className="row">
<Button>7</Button>
<Button>8</Button>
<Button>9</Button>
<Button>/</Button>
</div>
</div>
</div>
);
}
}
export default App;
I'm running into a classnames issue with sass modules in Preact:
// Card component
import { h, Component } from "preact";
import cx from "classnames";
import style from "./style";
export const Card = () => {
return (
<div class={style.card}>
<div class={cx(style.image, "image-item")} />
<div class={style.body} />
</div>
);
};
// in style.scss
.card {
.image-item {
margin-bottom: 23px;
}
}
The specified margin-bottom css does not get applied, any ideas?