Player Profiles | Next.js | Page 1

violet bison Feb 14, 2023, 11:04 AM

#

Looks like you mad a class that overrides the BG color

analog aurora Feb 14, 2023, 11:04 AM

#

Oh

#

What should I do to fix that?

#

Also why would it only appear on vercel though?

violet bison Feb 14, 2023, 11:06 AM

#

When you said localhost, do you mean localhost:3000 i.e. DEV build?

#

Could related to style injection order

analog aurora Feb 14, 2023, 11:06 AM

#

Yeah

violet bison Feb 14, 2023, 11:07 AM

#

You see, the default bg color is indeed a dark grey, but get overridden by a class that seem to be created by you according to the class name

analog aurora Feb 14, 2023, 11:07 AM

#

Hmmm

#

Oh

#

I think I want it to be a different gray from the background though

#

Like the color of the actual boxes are fine

#

It’s that the dropdown has white boxes

#

Is more of the issue

#

that the text is black instead of white as well

violet bison Feb 14, 2023, 11:09 AM

#

If I remove that background-color: rgb(255, 255, 255), this is what it's look like

analog aurora Feb 14, 2023, 11:09 AM

#

Oh damn

#

How would I do that in my code then?

#

if it helps heres what my css looks like

#

@tailwind components;
@tailwind utilities;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  color: #fff;
}

html {
  background: #222222;
  color: #fff;
}

.MuiButton-outlinedSecondary {
  border: "1px solid rgba(0, 0, 0, 0.12)";
  background-color: #444;
  color: #fff;
}

.MuiOutlinedInput-root {
  background-color: #444;
  color: #fff;
}

.MuiAutocomplete-root {
  background-color: #444;
  color: #fff;
}

.MuiPaper-root {
  background-color: #444;
  color: #fff;
}

.MuiInputLabel-outlined, .MuiAutocomplete-inputRoot, .MuiOutlinedInput-input {
  color: #fff;
}

.MuiCard-root {
  background: #444;
  color: white;
}

.MuiCardContent-root {
  background: #444;
  color: white;
}

.MuiTableRow-root:nth-child(even) {
  background-color: #555;
  color: white;
}

.MuiTableRow-root:nth-child(odd) {
  background-color: #444;
  color: white;
}
.MuiButton-root {
  background-color: #444;
  color: white;
}
.MuiAutocomplete-popper {
  background-color: #000;
  color: #fff;

#

im just confused at why localhost is different lol

#

its weird to me cuz I havent set the background color of anything to white

#

so I dont get how that specifically could be white if it was a custom thing lol

violet bison Feb 14, 2023, 11:13 AM

#

Did you do this?

https://mui.com/material-ui/guides/interoperability/#tailwind-css

Style library interoperability - Material UI

While you can use the Emotion-based styling solution provided by MUI to style your application, you can also use the one you already know and love (from plain CSS to styled-components).

analog aurora Feb 14, 2023, 11:14 AM

#

no, idk what that is lol

#

should I?

violet bison Feb 14, 2023, 11:15 AM

#

analog aurora its weird to me cuz I havent set the background color of anything to white

Yes, by doing this, You basically tell the code to "Please inject MUI styles first so that I can override it with my Tailwind styles later on"

analog aurora Feb 14, 2023, 11:15 AM

#

oh where do I put this?

violet bison Feb 14, 2023, 11:16 AM

#

Properly in _app.tsx

analog aurora Feb 14, 2023, 11:16 AM

#

should I put it in index too or only in app?

violet bison Feb 14, 2023, 11:17 AM

#

What index? pages/index?

analog aurora Feb 14, 2023, 11:17 AM

#

yeah myb

#

wait

#

forgive me im a bit confused

#

if I put it in app it gives me an error of export default twice i think

#

oh I guess just put function instead right>

violet bison Feb 14, 2023, 11:22 AM

#

I mean:

export default function MyApp({ Component, pageProps }) {
  return (
    <StyledEngineProvider injectFirst >
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Component {...pageProps } />
      </ThemeProvider>
    </StyledEngineProvider>
  );
}

analog aurora Feb 14, 2023, 11:23 AM

#

violet bison Properly in `_app.tsx`

Oh, so Id have to list them all out?

#

also does it matter im using makestyles?

#

cuz thats an old one right?

#

makestyles i mean

violet bison Feb 14, 2023, 11:24 AM

#

OK, I'm really confused about what you are doing.
You are using MUI (Emotion) + @mui/styles (JSS) + Tailwind?

#

That's not a good combination BTW. But I'm not sure whether it's too late for you to go back

analog aurora Feb 14, 2023, 11:26 AM

#

Im not using emotion I think

#

yeah the guy before me was doing it lol so I was incorporating it from him

#

i pretty much just need the box and the table cleaned up everything else is fine for the most part I think

violet bison Feb 14, 2023, 11:27 AM

#

OK, can you post what _app looks like now?

analog aurora Feb 14, 2023, 11:28 AM

#

im a bit confused on how to incorporate this export default function MyApp({ Component, pageProps }) {
return (
<StyledEngineProvider injectFirst >
<ThemeProvider theme={theme}>
<CssBaseline />
<Component {...pageProps } />
</ThemeProvider>
</StyledEngineProvider>
);
}

#

like do i Just raw copy and paste that in?

violet bison Feb 14, 2023, 11:28 AM

#

Show me what do you have in _app.js right now, we can start from there

analog aurora Feb 14, 2023, 11:29 AM

#

import { Button, ButtonGroup, Grid } from "@mui/material";
import { makeStyles } from "@mui/styles";
import { useState } from "react";
import { StyledEngineProvider } from '@mui/material/styles';


const useStyles = makeStyles({
  root: {
    background: "rgba(0, 0, 0, 0.10)",
    color: "rgba(0, 0, 0, 0.87)",
  },
  btn: {
    "& .MuiButton-root": {
      border: "1px solid #B5BABE",
    },
    "& .MuiButton-root:not(:last-child)": {
      borderRight: "none",
    },
  },
});

export default function App({ Component, pageProps }) {
  let [selectedSummary, setSelectedSummary] = useState(false);
  let [selectedQuickView, setSelectedQuickView] = useState(false);
  let [selectedFullData, setSelectedFullData] = useState(false);
  const classes = useStyles();

  return (
    <div>
      <div className="mt-4 text-black/[.54]">
        <Grid container justifyContent="center">
          <ButtonGroup size="small" variant="outline" className={classes.btn}>
            <Button
              className={selectedSummary ? classes.root : ""}
              onClick={() => {
                setSelectedSummary(true);
                setSelectedQuickView(false);
                setSelectedFullData(false);
              }}
            >
              Summary
            </Button>
            <Button
              className={selectedQuickView ? classes.root : ""}
              onClick={() => {
                setSelectedSummary(false);
                setSelectedQuickView(true);
                setSelectedFullData(false);
              }}
              sx={{ borderRadius: 0 }}
            >
              Quick View
            </Button>
            <Button
              className={selectedFullData ? classes.root : ""}
              onClick={() => {
                setSelectedSummary(false);
                setSelectedQuickView(false);
                setSelectedFullData(true);
              }}
            >
              Full Data
            </Button>
          </ButtonGroup>
        </Grid>
      </div>
      <Component
        selectedSummary={selectedSummary}
        selectedQuickView={selectedQuickView}
        selectedFullData={selectedFullData}
        {...pageProps}
      />
    </div>
  );
}```

#

oh would I just rap

#

the return statement in <StyledEngineProvider>

violet bison Feb 14, 2023, 11:34 AM

#

I'm not gonna comment on how this project looks like a complete mess, but the following should work.

📎 app.jsx

analog aurora Feb 14, 2023, 11:38 AM

#

violet bison I'm not gonna comment on how this project looks like a complete mess, but the fo...

and then just wrapping the return statements part right

#

tbf this part of it was made by someone else 😭

violet bison Feb 14, 2023, 11:38 AM

#

Yeah, but you can just replace the entire _app with what I gave you if you want

#

And BTW, you ARE using Emotion. That's what MUI 5 components rely.

analog aurora Feb 14, 2023, 11:40 AM

#

oh gotchu myb

violet bison Feb 14, 2023, 11:41 AM

#

So yeah, this project is MUI (Emotion) + @mui/styles (JSS) + Tailwind + whatever you guys are adding....

Lord have mercy

analog aurora Feb 14, 2023, 11:42 AM

#

haha yeah lol I was just using MUI an he he wanted to add the other stuff lmao

#

alright ill try redploying it

#

but so is that why the Deployment is different from the localhost then?

violet bison Feb 14, 2023, 11:44 AM

#

I can't say for sure. But I know DEV and PROD build (I mean next build) are created differently. e.g. DEV build doesn't do tree shaking at all.

Perhaps style injection order is also different?

analog aurora Feb 14, 2023, 11:45 AM

#

so the dev build is the localhost one and the first deploy build is the prod build? is that how that works?

violet bison Feb 14, 2023, 11:48 AM

#

dev build: when you run next dev (or npm run dev)
prod build: when you run next build (or npm run build)

When you are deploying, you are/supposed to create a production build. It's just that you may or may not deploying to a production environment.

analog aurora Feb 14, 2023, 11:48 AM

#

gotchu gotchu

#

well hopefully it works!

#

why does it take awhile for deployment to start sometimes

violet bison Feb 14, 2023, 11:54 AM

#

analog aurora why does it take awhile for deployment to start sometimes

Start or build? That's two concepts.

When you merged a PR, Vercel picks that up and pull your latest code and starts running npm run build to build your project. And that takes time.

Once it is built, Vercel basically copies (serves to be exact) the built files to the app server and starts the service. This should take a very short amount of time.

analog aurora Feb 14, 2023, 11:54 AM

#

oh i mean like the queu part lol

#

it takes 2 minutes to build but it takes like 2 minutes for it to start that

#

damn it didnt work lol

violet bison Feb 14, 2023, 11:55 AM

#

Maybe you have multiple apps deploying with the same account?

analog aurora Feb 14, 2023, 11:55 AM

#

Nah this is the only one, so its a bit od

#

also damn it didnt work :/, oh well hopefully itll work tommorow I think im gonna sleep. Really appreciate the help tho!

#

really appreciate it!!!

#

I think it at least gave me an idea of what to do, I saw a similar issue with tailwind and emotion online and the solution was similar to maybe thatll work/maybe I put something off

violet bison Feb 14, 2023, 11:56 AM

#

Don't forget to read the MUI doc. It told you how to setup Tailwind with MUI

analog aurora Feb 14, 2023, 11:56 AM

#

gotchu gothcu

#

appreciate it!

#Player Profiles