1
resposta

import "./styles.module.scss"

Olá! Teria como o react passar um valor para o scss?

Algo assim ou de outra forma: import "./styles.module.scss?test={valor}"

Vlw!

1 resposta

Oie Relison, porque você quer passar um valor pro css?

Gostaria de mudar algo ja definido ou criar estilos do componente para o css. Explique melhor o que precisa fazer ou esta pensando.

Respondendo sua pergunta no React o único jeito de passar valores para o css seria usando alguma lib como styled-components

Onde por exemplo você consegue passar props para o styled-components

Nesse exemplo https://styled-components.com/docs/basics#attaching-additional-props Esta passando um size

const Input = styled.input.attrs(props => ({
  // we can define static props
  type: "text",

  // or we can define dynamic ones
  size: props.size || "1em",
}))`
  color: palevioletred;
  font-size: 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;

  /* here we use the dynamically computed prop */
  margin: ${props => props.size};
  padding: ${props => props.size};
`;

render(
  <div>
    <Input placeholder="A small text input" />
    <br />
    <Input placeholder="A bigger text input" size="2em" />
  </div>
);

Nesse outro exemplo https://styled-components.com/docs/basics#passed-props

Esta passando uma cor diferente, dessa forma você pode criar algo que volta do React para o CSS

// Create an Input component that'll render an <input> tag with some styles
const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  color: ${props => props.inputColor || "palevioletred"};
  background: papayawhip;
  border: none;
  border-radius: 3px;
`;

// Render a styled text input with the standard input color, and one with a custom input color
render(
  <div>
    <Input defaultValue="@probablyup" type="text" />
    <Input defaultValue="@geelen" type="text" inputColor="rebeccapurple" />
  </div>
);

Espero ter Ajudado e bons estudos