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?
Related
I am trying to use #emotion/styled. But, I cannot get the components to render on the screen, whereas if I am using the HTML element it is working fine.
import styled from "#emotion/styled";
export const Button = styled.button`
color: red;
background-color: green;
`;
import { Button } from "../styles/Button";
const Test = () => {
return (
<div>
<Button>Hello</Button>
</div>
);
};
export default Test;
Does anyone has any idea where things are going wrong?
It is working in my sandbox here
sandbox
import "./styles.css";
import styled from "#emotion/styled";
const Button = styled.button`
color: red;
background-color: green;
`;
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Button>Hello</Button>
</div>
);
}
try to import this on top of your component where you use emotion css.
This fixed my problems with not loading emotion css. Cheers!
/** #jsxImportSource #emotion/react */
You can use styled with css function to make a new component by updating some styles of existing component.
import styled from "#emotion/styled";
import { css } from "#emotion/react";
import { Button as MUIButton } from "#mui/material";
export const Button = styled(MUIButton)(
css({
backgroundColor: "green",
color: "red",
})
);
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.
I am working on a web based project. All code is executed but the styles are not being applied to files. Below is code of my react file. I also added my css file below it.
I tried using .sass extension which is also not working.
Can anyone help me with it? How do I apply styles?
import "./App.css";
import React, {useState, useEffect} from "react";
import Axios from "axios";
function App(){
const [searchVal,setSearchVal]=useState('');
//getting values from DB
return <div>
<input type="text" placeholder="Search College" onChange={event =>{setSearchVal(event.target.value)}}></input>
{collegeList.filter((val)=>{
if(searchVal==""){
return val;
}else if (val.Name_of_College.toLowerCase().includes(searchVal.toLowerCase())){
return val;
}
}).map((val)=>{
return <div className="clgListDiv" > <p>
College Name: {val.Name_of_College} <br></br>
</p>
</div>
})}
</div>
}
export default App;
This is the css file
.App{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
}
.APP input{
margin-top: 20px;
width:350px;
height: 40px;
font-size: 20px;
padding-left: 10px;
}
Well it doesn't work because you didn't add className attribute in JSX code in first div and maybe you should rename .APP input to .App input in your CSS file as you also want same styling in input tag also.
import "./App.css";
import React, {useState, useEffect} from "react";
import Axios from "axios";
function App(){
const [searchVal,setSearchVal]=useState('');
//getting values from DB
return <div className='App'>
<input type="text" placeholder="Search College" onChange={event =>{setSearchVal(event.target.value)}}></input>
{collegeList.filter((val)=>{
if(searchVal==""){
return val;
}else if (val.Name_of_College.toLowerCase().includes(searchVal.toLowerCase())){
return val;
}
}).map((val)=>{
return <div className="clgListDiv" > <p>
College Name: {val.Name_of_College} <br></br>
</p>
</div>
})}
</div>
}
export default App;
Best Practice in React:
import React, { useState, useEffect } from "react";
import "./App.css";
import Axios from "axios";
function App() {
const [searchVal, setSearchVal] = useState("");
//getting values from DB
const content = collegeList
.filter((val) => {
if (searchVal == "") {
return val;
} else if (
val.Name_of_College.toLowerCase().includes(searchVal.toLowerCase())
) {
return val;
}
})
.map((val) => {
return (
<div className="clgListDiv">
<p>
College Name: {val.Name_of_College} <br></br>
</p>
</div>
);
});
return (
<div>
<input
type="text"
placeholder="Search College"
onChange={(event) => {
setSearchVal(event.target.value);
}}
></input>
{content}
</div>
);
}
export default App;
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;
This is the css file named Layout.css :
.Content {
margin-top: 16px;
color : red;
}
and this is the component named Layout.js :
import React from 'react';
import classes from './Layout.css';
// const Fragment = React.Fragment;
const { Fragment } = React;
const Layout = (props) => {
return (
<Fragment>
<div> toolbar , sidedrawer , backdrop </div>
<main className={classes.Content}>{props.children}</main>
</Fragment>
);
};
export default Layout;
and the problem is the css doesnt apply to component, i have this problem in my several components.
You have to import your css file like this :
import './Layout.css';
and then use the class like this :
<main className="Content">{props.children}</main>