I am trying to import my CSS file into the JSX file but I am unable to do that.
import React from 'react';
import FormControl from '#material-ui/core/FormControl';
import MenuItem from '#material-ui/core/MenuItem';
import Select from '#material-ui/core/Select';
import Button from '#material-ui/core/Button';
import { Icon } from '#twilio/flex-ui';
import { makeInternalCall } from './index';
import '../../styling/theme1.css'; // Here it throws an error
I ran this command in terminal npm install style-loader css-loader --save-dev
My webpack.config.js
module.exports = (config, { isProd, isDev, isTest }) => {
/**
* Customize the webpack by modifying the config object.
* Consult https://webpack.js.org/configuration for more information
*/
config.module.rules.push({
test: /\.css$/,
use: ['style-loader', 'css-loader'],
});
return config;
}
Theme1.css
.root {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
.main {
margin: 0;
padding: 0;
}
.formControl {
width: 250px;
}
.boxDialpad {
border-top: 1px solid #eeeeee;
}
.titleAgentDialpad {
width: 100%;
text-transform: uppercase;
text-align: center;
font-weight: bold;
font-size: inherit;
}
.subtitleDialpad {
text-transform: uppercase;
}
.buttonAgentDialpad {
display: flex;
justify-content: center;
}
.dialPadBtn {
border-radius: 100px;
min-width: 0px;
}
And I am getting this error when I run my project. And I am getting this error when I run my project.
Related
Error:
./src/card.js
Attempted import error: 'Bottom' is not exported from './styles/cards.style'.
card.js
import React from 'react'
import {
Bottom,
Color,
Text,
Image
} from "./styles/cards.style";
function Card(props) {
return (
<div>
<Bottom>
<Color />
<Text>{props.text}</Text>
<Text>{props.text}</Text>
</Bottom>
<Image
alt=""
src={props.image}
/>
</div>
);
}
export default Card;
cards.style
import styled from "styled-components";
export default {
colors: {
black: "rgba(0,0,0,1)",
brandPrimary: "rgba(238,120,36,1)",
brandPrimaryLight: "rgba(255,184,8,1)",
brandTertiary: "rgba(0,65,125,1)",
darkSlateGray: "rgba(51,51,51,1)",
white: "rgba(255,255,255,1)"
},
fonts: {
uiMainContent: {
family: "Poppins",
size: "15px",
weight: "300",
lineHeight: "21px"
},
uiSubContent: {
family: "Poppins",
size: "13px",
weight: "300",
lineHeight: "20px"
}
}
};
export const Bottom = styled.div`
width: 100%;
height: calc(100% - 20px);
background-color: ${props => props.theme.colors.white};
border-radius: 4px;
padding: 0 0 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
`;
export const Color = styled.div`
height: 120px;
background-color: ${props =>
props.theme.colors.brandPrimary};
margin-bottom: 16px;
border-radius: 4px 4px 0px 0px;
align-self: stretch;
`;
export const Text = styled.p`
color: ${props => props.theme.colors.black};
margin-left: 16px;
letter-spacing: 0.1px;
font-family: ${props =>
props.theme.fonts.uiSubContent.family};
font-size: ${props =>
props.theme.fonts.uiSubContent.size};
font-weight: ${props =>
props.theme.fonts.uiSubContent.weight};
line-height: ${props =>
props.theme.fonts.uiSubContent.lineHeight};
&:not(:last-of-type) {
margin-bottom: 4px;
}
`;
export const Image = styled.img`
width: 150px;
height: 92px;
position: absolute;
left: 29px;
top: 14px;
`;
I am trying to build cards in reactjs. I usually stick to scss however cannot use props with scss which I will have to use later to dynamically generate components. Not sure what is wrong here as I did export Button. Please can someone shed some insight you see what is so blatantly wrong it is causing this error.
in that case you have an export default as the first thing of you code, if you are exporting more than one thing from the same file, you should stick to exporting each const/function by itself and not having any export default
If you are using ReactJS/NextJS I would really recommend creating a global theme that you normally write and import with the application, so you could have things like
// global.js
const GlobalStyle = createGlobalStyle`
* {
box-sizing: border-box;
}
:root {
--black: rgba(0,0,0,1);
--brandPrimary: rgba(238,120,36,1);
...
...
`
}
Take a look here, it should help you a lot.
I am trying to create a floating label select component, So the select box will have a label on click of that it will show a dropdown options. Like this With an icon and override the native browser options.
I was able to achieve using input field, but i am not able to understand how to create such a like component.
Dropdown.js
import React from "react";
import {
DropdownWrapper,
StyledSelect,
StyledOption,
StyledLabel
} from "./style";
export function Dropdown(props) {
return (
<DropdownWrapper onChange={props.onChange}>
<StyledLabel htmlFor={props.id}>{props.formLabel}</StyledLabel>
<StyledSelect id={props.id} name={props.id}>
{props.children}
</StyledSelect>
</DropdownWrapper>
);
}
export function Option(props) {
return <StyledOption selected={props.selected}>{props.value}</StyledOption>;
}
Style.js
import styled from "#emotion/styled";
export const DropdownWrapper = styled.div`
display: flex;
flex-flow: column;
justify-content: flex-start;
`;
export const StyledSelect = styled.select`
height: 100%;
padding: 0.5rem 0;
margin-bottom: 1rem;
border: none;
border-bottom: 1px solid black;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: "";
`;
export const StyledOption = styled.option`
color: ${(props) => (props.selected ? "lightgrey" : "black")};
`;
export const StyledLabel = styled.label`
margin-bottom: 1rem;
`;
Any help appreciated, here is what i have tried so far. link
What I did:
I'm passing some props to functional component Stat.jsx.
What I expected:
I need to pass some background gradient color codes as a string type prop to the Stat.jsx component to make custom color elements.
What happened:
Props aren't passing to the Stat.jsx, also props object is empty.
Stat.jsx
import React from 'react';
import styled from 'styled-components';
const Stat = styled.div`
display: flex;
align-items: center;
justify-content: center;
padding: 0 2.5em;
width: auto;
height: 2.5em;
border-radius: 0.5em;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
background: linear-gradient(160deg, ${(props) => console.log(props) });
font-size: 1.8em;
font-family: Rubik-Medium;
color: #fff;
`;
// console.log(props) is returning object: { children: "1000", theme: {} }
export default ({ value }) => <Stat>{value}</Stat>;
Stats.jsx
import React from 'react';
import Stat from './Stat';
import styled from 'styled-components';
const Stats = styled.div`
display: flex;
`;
export default () => (
<div>
<Stats>
<Stat value="1000" background="#F4D03F, #16A085" />
</Stats>
</div>
);
Quick Fix
Because you don't pass the background prop to the actual Stat component:
export default (props) => <Stat {...props}>{props.value}</Stat>;
Explanation
A better way to illustrate the issue is by renaming your components:
import React from 'react';
import styled from 'styled-components';
const StyledStat = styled.div`
display: flex;
align-items: center;
justify-content: center;
padding: 0 2.5em;
width: auto;
height: 2.5em;
border-radius: 0.5em;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
background: linear-gradient(160deg, ${(props) => console.log(props) });
font-size: 1.8em;
font-family: Rubik-Medium;
color: #fff;
`;
export default function Stat(props){
const { value } = props;
return (
<StyledStat {...props}>
{value}
</StyledStat>;
};
Styled components props comes from the ThemeProvider usually, this is why you see a theme props while console.logging inside your styled.div
Usually in App.js you have something like that:
// src/App.jsx
import React from 'react'
import { ThemeProvider } from 'styled-components';
const theme: {
colors: {
primary: blue,
}
}
const App = () => (
<ThemeProvider theme={theme}>
<Stat />
</ThemeProvider>
)
export default App;
you can access these attributes with
${(props) => props.theme.colors.primary }
because styled-components provides its theme props to every StyledComponents (there is a Context Provider/consumer thing behind)
import React from 'react';
import styled from 'styled-components';
const Stat = styled.div`
display: flex;
align-items: center;
justify-content: center;
padding: 0 2.5em;
width: auto;
height: 2.5em;
border-radius: 0.5em;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
background: linear-gradient(160deg, ${(props) => props.theme.colors.primary} });
font-size: 1.8em;
font-family: Rubik-Medium;
color: #fff;
`;
I tried using vue-styled-compoenents to style a simple button with some text inside but the styles dont work and I get a scopedSlots issue in the parent component.
This is the code for the button and the text components in component.js
import styled from 'vue-styled-components';
export const sLabel = styled.label`
color: #000;
`;
export const sButton = styled.div`
height: 1rem;
width: 2rem;
background-color: #000;
${sLabel} {
color: #fff;
}
`;
This is my code in my page.
<template>
<sButton>
<sLabel>Button</sLabel>
</sButton>
</template>
<script>
import { sButton, sLabel } from './component.js'
export default {
components: {
sButton,
sLabel
}
}
</script>
This is the result I get under the sButton styles and nothing under sLabel
), scopedSlots: this.$scopedSlots
But Instead if I just use this code it works.
export const sButton = styled.div`
height: 1rem;
width: 2rem;
background-color: #000;
label {
color: #fff;
}
`;
The styles are applied to the parent component if I declare the parent component before the child even if the styles are under the child.
export const sButton = styled.div`
height: 1rem;
width: 2rem;
background-color: #000;
${sLabel} {
color: #fff;
}
`;
export const sLabel = styled.label`
color: #000;
`;
Can someone tell me where my code is incorrect and what is causing these issues ?
I am beginner to ReactJS, Currently I am using styled-component for style some module. Actually I created 2 files in one folder. One is style.js where I am making 2,3 object and now I want to export these 3 object to my another file which name is 2nd.js but it not working for me Could you please help me How I can import style.js object to my file .
Style.js Code
import styled from 'styled-components';
export const SubText = styled.div`
font-size: 20px;
text-align: center;
padding-bottom: 30px;
width: 330px;
color: #012653;
margin: 0 auto;
font-weight: 440;
`;
export const GeneralText = styled.div`
color: red;
font-size: 26px;
font-weight: 600;
text-align: center;
min-width: 266px;
padding-bottom: 30px;
font-family: Lato, sans-serif;
margin-top: 50px;
color: #012653;
`;
export const ButtonWrapper = styled.div`
text-align: center;
margin-top: 26px;
`;
2nd.js Code
import Style from './Style';
<GeneralText>This is dummy text </GeneralText>
You can do this by:-
import {SubText, GeneralText, ButtonWrapper} from './style'
Actually,there are many ways to solve this:
import * as Style from './style'
Or the above answers says:
import {SubText, GeneralText, ButtonWrapper} from './style'