Develop Reference

#Import another css file didn't work when i'm working on Laravel 9 Inertia React stack

My goal is to import additional input.css file that has styling for input form for my react components file to the default app.css. For some reason, it didnt detect the focused attribute that is applied on the input.css styling, but whenever I put the styling inside #layer components it works.
resources/css/app.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#import "input.css";
.flex::before,
.flex::after {
display: none !important;
}
#layer components {
[type="text"],
[type="email"],
[type="url"],
[type="password"],
[type="number"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="search"],
[type="tel"],
[type="time"],
[type="week"],
[multiple],
textarea,
select {
border-color: transparent;
}
[type="text"]:focus,
[type="email"]:focus,
[type="url"]:focus,
[type="password"]:focus,
[type="number"]:focus,
[type="date"]:focus,
[type="datetime-local"]:focus,
[type="month"]:focus,
[type="search"]:focus,
[type="tel"]:focus,
[type="time"]:focus,
[type="week"]:focus,
[multiple]:focus,
textarea:focus,
select:focus {
border-color: transparent;
--tw-ring-color: transparent;
}
}
resources/css/input.css
.input-primary {
#apply focus:bg-form-bg bg-form-bg focus:outline-alerange focus:outline-none;
}
.input-error {
#apply ring ring-red-600;
}
.input-primary-outline {
#apply bg-[#fff] focus:bg-[#fff] border-alerange focus:border-alerange;
#apply file:bg-alerange file:text-white file:rounded-md file:pd-2;
}
resources/js/Input.jsx
import React, { useEffect, useRef } from 'react';
import PropType from 'prop-types';
Input.propTypes = {
type: PropType.oneOf(['text', 'email', 'password', 'number', 'file']),
name: PropType.string,
value: PropType.oneOfType([PropType.string, PropType.number]),
defaultValue: PropType.oneOfType([PropType.string, PropType.number]),
className: PropType.string,
variant: PropType.oneOf(['primary', 'outline', 'primary-outline']),
autoComplete: PropType.string,
required: PropType.bool,
isFocused: PropType.bool,
handleChange: PropType.func,
placeholder: PropType.string,
isError: PropType.bool,
}
export default function Input({
type = 'text',
name,
value,
defaultValue,
className,
variant = "primary",
autoComplete,
required,
isFocused,
handleChange,
placeholder,
isError
}) {
const input = useRef();
useEffect(() => {
if (isFocused) {
input.current.focus();
}
}, []);
return (
<div className="flex flex-col items-start">
<input
type={type}
name={name}
value={value}
defaultValue={defaultValue}
className={
`rounded-2xl bg-form-bg py-[13px] px-7 w-full ${isError && "input-error"} input-${variant} ${className}`
}
ref={input}
autoComplete={autoComplete}
required={required}
onChange={(e) => handleChange(e)}
placeholder={placeholder}
/>
</div>
);
}
There's actually a warning from the vite.js
enter image description here
But when I tried to move the #import on top before #tailwinds, it give another error on the webpage like this:
enter image description here
And it works for example when I write it like this:
resources/css/app.css
#tailwind base;
#tailwind components;
#tailwind utilities;
/* #import "input.css"; */
.flex::before,
.flex::after {
display: none !important;
}
.input-primary {
#apply focus:bg-form-bg bg-form-bg focus:outline-alerange focus:outline-none;
}
.input-error {
#apply ring ring-red-600;
}
#layer components {
[type="text"],
[type="email"],
[type="url"],
[type="password"],
[type="number"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="search"],
[type="tel"],
[type="time"],
[type="week"],
[multiple],
textarea,
select {
border-color: transparent;
}
[type="text"]:focus,
[type="email"]:focus,
[type="url"]:focus,
[type="password"]:focus,
[type="number"]:focus,
[type="date"]:focus,
[type="datetime-local"]:focus,
[type="month"]:focus,
[type="search"]:focus,
[type="tel"]:focus,
[type="time"]:focus,
[type="week"]:focus,
[multiple]:focus,
textarea:focus,
select:focus {
border-color: transparent;
--tw-ring-color: transparent;
}
.input-primary-outline {
#apply bg-[#fff] focus:bg-[#fff] border-alerange focus:border-alerange;
#apply file:bg-alerange file:text-white file:rounded-md file:pd-2;
}
}
help are appreciated, thanks.

I just found a work around on this, so instead of adding the import on the app.css file, you actually import the other css in the resources/js/app.jsx instead. Such as:
import "./bootstrap";
import "../css/app.css";
import "../css/button.css";
import "../css/input.css";
import "../css/sidebar.css";
import React from "react";
import { render } from "react-dom";
import { createInertiaApp } from "#inertiajs/inertia-react";
import { InertiaProgress } from "#inertiajs/progress";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
const appName =
window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.jsx`,
import.meta.glob("./Pages/**/*.jsx")
),
setup({ el, App, props }) {
return render(<App {...props} />, el);
},
});
InertiaProgress.init({ color: "#4B5563" });
I dont know if this is actually the way, or best practices or such. But it works for now.

Can't import react component into a gatsby starter component

newbie in Gatsby and React. I am trying to import this responsive navbar React component into this Gatsby starter:
Instead of the Menu component in the starter, I created a MenuBar, which I call from another component called Layout.
The code on top works (slightly modified from starter), not using external component.
import React from 'react'
import { Link } from 'gatsby'
import styled from '#emotion/styled'
import { useSiteMetadata } from '../hooks/use-site-metadata'
const Header = styled.header`
background: ${props => props.theme.colors.primary};
width: 100%;
padding: 1.5em 0;
`
const Nav = styled.nav`
width: 100%;
max-width: ${props => props.theme.sizes.maxWidth};
margin: 0 auto;
padding: 0 1.5em;
ul {
display: flex;
justify-content: space-between;
}
li {
display: inline-block;
margin-left: 1em;
h2 {
font-size: 1.2em;
#media (max-width: ${props => props.theme.responsive.small}) {
font-size: 1em;
}
}
&:first-of-type {
position: relative;
margin: 0;
flex-basis: 100%;
h2 {
font-size: 1.5em;
#media (max-width: ${props => props.theme.responsive.small}) {
font-size: 1em;
}
}
}
}
a {
text-decoration: none;
color: white;
transition: all 0.2s;
border-bottom: 2px solid ${props => props.theme.colors.text};
&:hover {
color: #e8e6e6;
}
}
`
const activeLinkStyle = {
color: 'white',
}
const Menu = () => {
const { menuLinks } = useSiteMetadata()
return (
<Header>
<Nav>
<ul>
{menuLinks.map(link => (
<li key={link.name}>
<Link to={link.slug} activeStyle={activeLinkStyle}>
<h2>{link.name}</h2>
</Link>
</li>
))}
</ul>
</Nav>
</Header>
)
}
export default Menu
But this one below (where I import the "responsive animate navbar" does not work). I think it has to do with the render metho. Maybe my question is more on Javascript? Any help on getting it to work is welcome. Thanks!
import React from 'react'
import { Link } from 'gatsby'
import styled from '#emotion/styled'
import { useSiteMetadata } from '../hooks/use-site-metadata'
import ReactNavbar from 'react-responsive-animate-navbar'
class MenuBar extends React.Component {
render() {
return (
<ReactNavbar
color="rgb(25, 25, 25)"
logo="https://svgshare.com/i/KHh.svg"
menu={[
{ name: 'HOME', to: '/' },
{ name: 'ARTICLES', to: '/articles' },
{ name: 'ABOUT ME', to: '/about' },
{ name: 'CONTACT', to: '/contact' },
]}
social={[
{
name: 'Linkedin',
url: 'https://www.linkedin.com/in/nazeh-taha/',
icon: ['fab', 'linkedin-in'],
},
{
name: 'Facebook',
url: 'https://www.facebook.com/nazeh200/',
icon: ['fab', 'facebook-f'],
},
{
name: 'Instagram',
url: 'https://www.instagram.com/nazeh_taha/',
icon: ['fab', 'instagram'],
},
{
name: 'Twitter',
url: 'http://nazehtaha.herokuapp.com/',
icon: ['fab', 'twitter'],
},
]}
/>
)
}
}
export default MenuBar
I get this error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `MenuBar`.
▶ 21 stack frames were collapsed.
(anonymous function)
/home/neto/Documents/gatsbyto/elindustrial/.cache/app.js:165
162 | dismissLoadingIndicator()
163 | }
164 |
> 165 | renderer(<Root />, rootElement, () => {
166 | apiRunner(`onInitialClientRender`)
167 |
168 | // Render query on demand overlay
Edit:
Thanks Ferran! Actually I was including React from 'react' in both files since at the top from the beginning but they were not appearing in my question because I messed up the formatting :). I read about named Exports vs Default Exports. I tried leaving it as a class, and also changed to a functional component, but I get the exact same error in both cases.
I have also tried importing from Layout using:
import MenuBar from '../components/MenuBar'
or
import {MenuBar} from '../components/MenuBar'
But I keep failing miserably with the exact same error above. I installed the component according to the Gatsby guide, I am not sure what I am doing wrong.
Edit 2:
Wrapped ReactNavBar in an empty tag as suggested, Ferran. And I am reading about functional components, still no luck :-S. Here is the code:
import React from 'react'
import ReactNavbar from 'react-responsive-animate-navbar'
const MenuBar = props => {
return (
<>
<ReactNavbar
color="rgb(25, 25, 25)"
logo="https://svgshare.com/i/KHh.svg"
menu={[
{ name: 'HOME', to: '/' },
{ name: 'ARTICLES', to: '/articles' },
{ name: 'ABOUT ME', to: '/about' },
{ name: 'CONTACT', to: '/contact' },
]}
social={[
{
name: 'Linkedin',
url: 'https://www.linkedin.com/in/nazeh-taha/',
icon: ['fab', 'linkedin-in'],
},
{
name: 'Facebook',
url: 'https://www.facebook.com/nazeh200/',
icon: ['fab', 'facebook-f'],
},
{
name: 'Instagram',
url: 'https://www.instagram.com/nazeh_taha/',
icon: ['fab', 'instagram'],
},
{
name: 'Twitter',
url: 'http://nazehtaha.herokuapp.com/',
icon: ['fab', 'twitter'],
},
]}
/>
</>
)
}
export default MenuBar
Edit 3
Including Layout code.
I ran gastby clean but still got the same error. I notice a warning when I build, this is the warning:
warn "export 'default' (imported as 'ReactNavbar') was not found in
'react-responsive-animate-navbar'
import React, { useEffect } from 'react'
import styled from '#emotion/styled'
import { Global } from '#emotion/core'
// import Menu from '../components/Menu'
import MenuBar from '../components/MenuBar'
import Footer from '../components/Footer'
import { globalStyles } from '../styles/globalStyles.js'
const Root = styled.div``
const Skip = styled.a`
padding: 0 1rem;
line-height: 60px;
background: #2867cf;
color: white;
z-index: 101;
position: fixed;
top: -100%;
&:hover {
text-decoration: underline;
}
&:focus,
&:active,
&:hover {
top: 0;
}
`
const Layout = props => {
function handleFirstTab(e) {
if (e.keyCode === 9) {
document.body.classList.add('user-is-tabbing')
}
}
useEffect(() => window.addEventListener('keydown', handleFirstTab), [])
return (
<Root className="siteRoot">
<div className="siteContent">
<Skip href="#main" id="skip-navigation">
Skip to content
</Skip>
<MenuBar />
<div id="main">{props.children}</div>
</div>
<Footer />
<Global styles={globalStyles} />
</Root>
)
}
export default Layout

Error: Element type is invalid: expected a string (for built-in
components) or a class/function (for composite components) but got:
undefined.
In 99% of the cases, this issue is related to the import/export method, if some component is exported as default but imported as named (or vice versa) it will cause the prompted issue.
In your case, you are returning a class-based component but your issue doesn't come from that. You are missing the importation of React and Component since you are extending it. Following the dependency example:
import { Link } from 'gatsby'
import styled from '#emotion/styled'
import { useSiteMetadata } from '../hooks/use-site-metadata'
import { ReactNavbar } from "react-responsive-animate-navbar";
import React, { Component } from 'react';
class MenuBar extends React.Component {
render() {
return (
<ReactNavbar
color="rgb(25, 25, 25)"
logo="https://svgshare.com/i/KHh.svg"
menu={[
{ name: 'HOME', to: '/' },
{ name: 'ARTICLES', to: '/articles' },
{ name: 'ABOUT ME', to: '/about' },
{ name: 'CONTACT', to: '/contact' },
]}
social={[
{
name: 'Linkedin',
url: 'https://www.linkedin.com/in/nazeh-taha/',
icon: ['fab', 'linkedin-in'],
},
{
name: 'Facebook',
url: 'https://www.facebook.com/nazeh200/',
icon: ['fab', 'facebook-f'],
},
{
name: 'Instagram',
url: 'https://www.instagram.com/nazeh_taha/',
icon: ['fab', 'instagram'],
},
{
name: 'Twitter',
url: 'http://nazehtaha.herokuapp.com/',
icon: ['fab', 'twitter'],
},
]}
/>
)
}
}
export default MenuBar
Using a functional component:
import React from 'react';
import { ReactNavbar } from "react-responsive-animate-navbar";
const MenuBar = (props) => {
return <>
<ReactNavbar
color="rgb(25, 25, 25)"
logo="https://svgshare.com/i/KHh.svg"
menu={[
{ name: `HOME`, to: `/` },
{ name: `ARTICLES`, to: `/articles` },
{ name: `ABOUT ME`, to: `/about` },
{ name: `CONTACT`, to: `/contact` }
]}
social={[
{
name: `Linkedin`,
url: `https://www.linkedin.com/in/nazeh-taha/`,
icon: [`fab`, `linkedin-in`]
},
{
name: `Facebook`,
url: `https://www.facebook.com/nazeh200/`,
icon: [`fab`, `facebook-f`]
},
{
name: `Instagram`,
url: `https://www.instagram.com/nazeh_taha/`,
icon: [`fab`, `instagram`]
},
{
name: `Twitter`,
url: `http://nazehtaha.herokuapp.com/`,
icon: [`fab`, `twitter`]
}
]}
/>
</>
};
export default MenuBar;
Solution
Diving into the library, it seems that the module is not exported as default (as it can be seen in the source) as the documentation suggests so it needs to be imported as:
import { ReactNavbar } from "react-responsive-animate-navbar";

Here, MenuBar is a class component
Hence, you cannot import hooks in it.
try removing the below line from MenuBar component
import { useSiteMetadata } from '../hooks/use-site-metadata'

Using react-sticky to make a sticky header

I am trying to use the react-sticky package to make a sticky header, but my header keeps scrolling out of view. This is the package: https://www.npmjs.com/package/react-sticky
I am not sure if I am using the StickyContainer or Sticky compnents correctly. I am actually a bit confused about the "style" prop you're supposed to pass to the Sticky container.
If anyone can help, will be much appreciated. Thanks!
Here's the code for App.js:
import React, { Component } from 'react';
import './App.css';
import Header from './components/Header';
import Footer from './components/Footer';
import HomePage from './components/pages/HomePage';
import OurWork from './components/pages/OurWork';
import ContactUs from './components/pages/ContactUs';
import { BreakpointProvider } from 'react-socks';
import { StickyContainer, Sticky } from "react-sticky";
import { setDefaultBreakpoints } from 'react-socks';
setDefaultBreakpoints([
{ small: 0 },
{ medium: 700 }
]);
class App extends Component {
pageStyle = {
display: 'flex',
flexDirection: 'column'
}
render() {
return (
<BreakpointProvider>
<StickyContainer>
<div className="App">
<Sticky>
{({style}) => <Header style={style}/>}
</Sticky>
<div className="page" style={this.pageStyle}>
<HomePage />
<OurWork />
<ContactUs />
</div>
<Footer />
</div>
</StickyContainer>
</BreakpointProvider>
);
}
}
export default App;
Here is the Header component:
import React, { Component } from 'react';
import Logo from './Logo'
import NavBar from './NavBar';
import logo from '../images/transparent.png';
class Header extends Component {
headerStyle = {
height: 100,
margin: 20,
display: 'flex',
justifyContent: 'space-between',
zIndex: 10
};
render() {
return (
<div className="header" style={this.headerStyle}>
<Logo logo={logo}/>
<NavBar />
</div>
);
}
};
export default Header;

No external library is required for sticky header, check this resource React Table Sticky Header without external library
Demo
The trick is like
1 . divide the header and data part
Use fixed width for both
Wrap data container with a div , give that container div a fixed height,
allow
.container {
overflox-y : scroll;
height: 300px;
}

Assign styled-component CSS property based on props passed to component

I have two components TextField and Label.
The TextField is passing the prop req to the Label. I want to modify the styled-component based on the req prop being passed in. Here is my current code that is not working.
No errors are being reported to the console.
TextField.js
import React, {Component} from 'react';
import styled from 'styled-components';
import Label from '../Label/Label';
const Wrapper = styled.div`
display: flex;
flex-direction: column;
margin: 16px 8px 8px 8px;
`;
const Input = styled.input`
border-bottom: 1px solid rgba(0, 0, 0, .23);
&:focus {
border-bottom: 1px solid #2196f3;
}
`;
class TextField extends Component {
render() {
const {
label,
req = true,
} = this.props;
return (
<Wrapper>
<Label req={req} text={label}/>
<Input type={'textfield'}/>
</Wrapper>
);
}
}
export default TextField;
Label.js
import React, {Component} from 'react';
import styled from 'styled-components';
const LabelBase = styled.label`
color: rgba(0, 0, 0, .54);
font-size: 1rem;
line-height: 1;
&:after {
content: ${props => props.req ? '*' : ''};
}
`;
class Label extends Component {
render() {
const {
req,
text,
} = this.props;
return (
<LabelBase req={req}>{text}</LabelBase>
);
}
}
export default Label;

You say you want to style the component based on the ref prop, but it seems that you're using that prop as a boolean to add text, not styles so I just went with a simplified solution for that since psuedo-selectors like :after aren't supported in React's JS styles. There are other ways around that if need be, but I think you can just do the following. However, I've included a way to pass styles to the child component as well for your reference:
class Label extends React.Component {
render() {
const {
req,
text,
moreStyles
} = this.props;
const styles = {
"color": "rgba(0, 0, 0, .54)",
"fontSize": "1rem",
"lineHeight": 1
}
return (
<div style={{...styles, ...moreStyles}}>{text + (req ? '*' : '')}</div>
);
}
}
ReactDOM.render(<Label text="test" req="Yes" moreStyles={{"backgroundColor": "blue", "border": "1px solid black"}}/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

background-image in react component

I'm building a page and I want a material-ui element to have a background image using background-image CSS property. I have googled for it of course, and there are solutions but for some reason I can't see that image.
P.S.1: even changing that MUI element to regular hasn't helped me at all.
P.S.2: when I'm using inside container it shows, but that's not what I want.
UPDATE1: Tried adding height and width to container, still no luck...
import React from 'react';
import Paper from 'material-ui/Paper';
import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';
const styles = {
paperContainer: {
backgroundImage: `url(${"static/src/img/main.jpg"})`
}
};
export default class Home extends React.Component{
render(){
return(
<Paper style={styles.paperContainer}>
</Paper>
)
}
}

You have to import the image as the following, using the relative path.
import React from 'react';
import Paper from 'material-ui/Paper';
import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';
import Image from '../img/main.jpg'; // Import using relative path
const styles = {
paperContainer: {
backgroundImage: `url(${Image})`
}
};
export default class Home extends React.Component{
render(){
return(
<Paper style={styles.paperContainer}>
Some text to fill the Paper Component
</Paper>
)
}
}

I've found a fix for my case. Actually setting container height in pixels have helped.
Here's the code:
import React from 'react';
const styles = {
paperContainer: {
height: 1356,
backgroundImage: `url(${"static/src/img/main.jpg"})`
}
};
export default class Home extends React.Component {
render() {
return (
<div style={styles.paperContainer}>
</div>
)
}
}

I got this to work for material-ui, where the padding on my parent element was 24px so I added 48px to the width of the background image to make it work...
const styles = {
heroContainer: {
height: 800,
backgroundImage: `url(${"../static/DSC_1037.jpg"})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
width: `calc(100vw + 48px)`,
margin: -24,
padding: 24,
}
};
<Grid
container
direction="column"
justify="flex-end"
alignItems="right"
style={styles.heroContainer} >
<Grid item>Goes here</Grid>
</Grid>

Had the same issues while working with Material UI React and the Create React App. Here is the solution that worked for me. Note that I set up a webpack alias for the relative path
import BackgroundHeader from "assets/img/BlueDiamondBg.png"
const BackgroundHead = {
backgroundImage: 'url('+ BackgroundHeader+')'
}
<div style={BackgroundHead}>

Like Romainwn said, you need to import the image to the file. Make sure you use the relative path to parent, so instead of
static/src/img/main.jpg #looks for static folder from current file location
Do
/static/src/img/main.jpg #looks for file from host directory:
Another hack to do it would be adding an inline style tag to the component:
import React from 'react';
import Paper from 'material-ui/Paper';
import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';
import Image from '../img/main.jpg'; // Import using relative path
export default class Home extends React.Component{
render(){
return(
<Paper style="background:path/to/your/image;">
</Paper>
)
}
}

You can you sx props in MUI v5
import React from 'react';
import Paper from 'material-ui/Paper';
import Image from '../img/main.jpg';
export default class Home extends React.Component{
render(){
return(
<Paper sx={{ backgroundImage: `url(${Image})` }}>
</Paper>
)
}
}