如何在样式化组件中获取 Scss？

Question

我希望能够将我的 scss 变量与 react-select 组件一起使用

react-select 组件采用可以传递自定义样式的样式属性。我想在传递给样式的 customStyles 对象中使用我的 scss

例如，我有一个浅色主题色和一个深色主题色。我需要选择背景才能访问这些明暗 scss 变量

下面是代码

import React, { useState, useEffect } from 'react';
import { Card, CardBody, CustomInput, Button, Input, Label, Form } from 'reactstrap';
import { useDispatch, useSelector } from 'react-redux';
import { useForm } from 'react-hook-form';
import Select from 'react-select';
import FalconCardHeader from '../common/FalconCardHeader';
import CustomCardSummary from '../common/CustomCardSummary';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Link } from 'react-router-dom';
import { findANumber } from '../../actions/index';



const BuyNewNumbers = () => {
  const auth = useSelector((state) => state.auth)
  const dispatch = useDispatch()
  const [country, setCountry] = useState('US');
  const [areaCode, setAreaCode] = useState('');
  const [numberType, setNumberType] = useState('')
  const { register, handleSubmit, errors, watch } = useForm();


  
 const customStyles = {
  control: (base, state) => ({
    ...base,
    color:  '#d8e2ef',
    background: "#0b1727", <--- why cant i use my scss variables here?
    fontWeight: state.isSelected ? "bold" : "normal",
    // match with the menu
    borderRadius: state.isFocused ? "4px 4px 0 0" : 3,
    // Overwrittes the different states of border
    borderColor: state.isFocused ? "blue" : "#2c7be5",
    // Removes weird border around container
    boxShadow: state.isFocused ? null : null,
    "&:hover": {
      // Overwrittes the different states of border
      borderColor: state.isFocused ? "#2c7be5" : "blue"
    }
  }),
  placeholder: (base, state) => ({
    ...base,
    color: '#2c7be5',
    fontWeight: "bold",
  }),
  option: (base, state) => ({
    ...base,
    color:  '#d8e2ef', // 
    fontWeight: state.isSelected ? "bold" : "normal",
    backgroundColor: state.isFocused ? '#2c7be5' : '#0b1727'

  }),
  singleValue: (base, state) => ({ // single value determines color of text after selection
    ...base,
    color: "#d8e2ef",
    fontWeight: "bold",

  }),
  menu: (base, state) => ({
    ...base,
    // override border radius to match the box
    borderRadius: 0,
    background: 'green',
    // kill the gap
    marginTop: 15
  }),
  menuList: base => ({
    ...base,
    
    // kill the white space on first and last option
    padding: 10,
    background: '#2c7be5'
  })
  
};
  return (

    <Card className="h-100">
      <FalconCardHeader className="text-center"title="Buy a new number" light={false} />
      <CardBody tag={Form} className="bg-light" onSubmit={e => e.preventDefault()}>
      <CustomCardSummary color="success"className="d-flex justify-content-between">
          <span className="fs-1">Choose your Country</span>
          <div className="mb-2"></div>
        <CustomInput
          type="select"
          id="country"
          name="country"
          className="mb-3"
          value={country}
          onChange={({ target }) => setCountry(target.value)}
        >
          <option value="US">United States</option>
          <option value="CA">Canada</option>
          
        </CustomInput>
        <span className="fs-1">Choose Number Type</span>
        <div className="mb-2"></div>

        <CustomInput
          type="select"
          id="numberType"
          name="numberType"
          className="mb-3"
          value={country}
          onChange={({ target }) => setNumberType(target.value)} // dispatch an action and map over array of available area codes from twilio
          > 
            
            <option value="local">Local</option>
            <option value="Toll fre">Toll free</option>

          </CustomInput>
          <span className="fs-1">Area Code</span>
          <div className="mb-2"></div>

          <Select 
          styles={customStyles} <--- I want to use my SCSS variables here
          />

        </CustomCardSummary>
    
        <hr />
       
      </CardBody>
    </Card>
  );
  };


export default BuyNewNumbers;

Answer 1

我建议你使用styled-component 和styled-system

import styled from "styled-component";

const StyledComponent = styled.p `
  // scss content
  color:red;
  ...
`

Const StyledComponent1 = styled(StyledComponent)`
  // scss content
`

您可以轻松地使用您已经完成的对象。

const AnyStyledComponent = styled(AnyComponent)(
{
   // style object(as you have done)
},
variant({
  prop: "color",
  variants: {
    white: {
     color: "#fff"
    },
    black: {
      color: "#000"
    }
  }
})
)

你也可以在 styled-components 中参考Theming