MultiSelect.styled.ts 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. import styled from 'styled-components';
  2. import { MultiSelect as ReactMultiSelect } from 'react-multi-select-component';
  3. const MultiSelect = styled(ReactMultiSelect)<{
  4. minWidth?: string;
  5. height?: string;
  6. }>`
  7. min-width: ${({ minWidth }) => minWidth || '200px;'};
  8. height: ${({ height }) => height ?? '32px'};
  9. font-size: 14px;
  10. .search input {
  11. color: ${({ theme }) => theme.input.color.normal};
  12. background-color: ${(props) =>
  13. props.theme.input.backgroundColor.normal} !important;
  14. }
  15. .select-item {
  16. color: ${({ theme }) => theme.select.color.normal};
  17. background-color: ${({ theme }) =>
  18. theme.select.backgroundColor.normal} !important;
  19. &:active {
  20. background-color: ${({ theme }) =>
  21. theme.select.backgroundColor.active} !important;
  22. }
  23. }
  24. .select-item.selected {
  25. background-color: ${({ theme }) =>
  26. theme.select.backgroundColor.active} !important;
  27. }
  28. .options li {
  29. background-color: ${({ theme }) =>
  30. theme.select.backgroundColor.normal} !important;
  31. }
  32. & > .dropdown-container {
  33. background-color: ${({ theme }) =>
  34. theme.input.backgroundColor.normal} !important;
  35. border-color: ${({ theme }) => theme.select.borderColor.normal} !important;
  36. &:hover {
  37. border-color: ${({ theme }) => theme.select.borderColor.hover} !important;
  38. }
  39. height: ${({ height }) => height ?? '32px'};
  40. * {
  41. cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
  42. }
  43. & > .dropdown-heading {
  44. height: ${({ height }) => height ?? '32px'};
  45. color: ${({ disabled, theme }) =>
  46. disabled
  47. ? theme.select.color.disabled
  48. : theme.select.color.active} !important;
  49. & > .clear-selected-button {
  50. display: none;
  51. }
  52. &:hover {
  53. & > .clear-selected-button {
  54. display: block;
  55. }
  56. }
  57. }
  58. }
  59. `;
  60. export default MultiSelect;