can not apply css styles

[kellywang1234]

Hi, this is a great library that i want to use. But it seems when i install the library for functionality everything works, but the stylings are all missing, leaving plain styles. Here is the outcome and the code i wrote the code. Thank you for the help!

And if i remove the css folder and include 'import 'react-querybuilder/dist/query-builder.css' in QueryBuilderComponent.tsx file still not applying any css styles.

query-builder.scss

@import '~react-querybuilder/dist/query-builder.css';

QueryBuilderComponent.tsx

import React, { FC, useState } from 'react'
import {
  Field,
  QueryBuilder,
  RuleGroupType,
  formatQuery,
} from 'react-querybuilder'

import '../styles/query-builder.scss'

export interface DCFSliderProps {
  reverse?: boolean
}
const fields: Field[] = [
  { name: 'firstName', label: 'First Name' },
  { name: 'lastName', label: 'Last Name' },
]

const initialQuery: RuleGroupType = {
  combinator: 'and',
  rules: [
    { field: 'firstName', operator: 'beginsWith', value: 'Stev' },
    { field: 'lastName', operator: 'in', value: 'Vai,Vaughan' },
  ],
}

// const CustomValueEditor = () => {
//   // Custom logic here ...
//   return <input style={{ backgroundColor: 'red' }} />
// }

export const QueryBuilderComponent: FC<DCFSliderProps> = ({
  reverse = true,
}) => {
  console.log(reverse)
  const [query, setQuery] = useState(initialQuery)
  return (
    <div>
      <QueryBuilder
        // controlClassnames={{ addRule: 'bold' }}
        // controlElements={{
        //   valueEditor: CustomValueEditor,
        // }}
        controlClassnames={{ queryBuilder: 'queryBuilder-branches' }}
        fields={fields}
        query={query}
        onQueryChange={(q: any) => setQuery(q)}
      />
    </div>
  )
}

package.json

{
  "name": "@dcf/query-builder",
  "version": "1.0.0",
  "description": "DCF query builder",
  "license": "UNLICENSED",
  "files": [
    "dist"
  ],
  "types": "dist/types",
  "main": "dist/index.js",
  "module": "dist/index.module.js",
  "scripts": {
    "preinstall": "npx use-yarn",
    "postinstall": "patch-package",
    "precommit": "lint-staged",
    "clean": "run-p clean:*",
    "clean:node_modules": "rm -rf node_modules",
    "clean:build": "rm -rf dist",
    "install:focus": "yarn install --focus",
    "tsc": "tsc -p tsconfig.build.json",
    "rollup": "rollup -c rollup.config.js",
    "build": "run-s build:*",
    "preview": "vite preview",
    "build-prod": "cross-env NODE_OPTIONS=\"--max_old_space_size=6144\" run-s build:*",
    "build:types": "yarn tsc",
    "build:rollup": "yarn rollup",
    "build:sass": "node buildsass.js",
    "build:cpx": "cpx src/styles/agGrid.scss dist/",
    "dev": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" run-s dev:*",
    "dev:types": "yarn tsc",
    "dev:rollup": "yarn rollup -w",
    "test": "cross-env TZ=America/New_York jest --passWithNoTests",
    "test:watch": "yarn test --watch",
    "eslint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
    "eslint:fix": "yarn eslint --fix",
    "lint": "run-s tsc eslint",
    "lint:fix": "yarn tsc && yarn eslint:fix"
  },
  "dependencies": {
    "@dcf/assessments-shared": "3.50.0",
    "@dcf/avatar": "2.4.5",
    "@dcf/core": "3.18.0",
    "@dcf/icon": "2.17.0",
    "@dcf/theme": "1.33.1",
    "@dcf/utils": "1.36.22",
    "@vitejs/plugin-react": "^4.1.0",
    "react-querybuilder": "6.5.4",
    "classnames": "^2.2.6",
    "lodash": "^4.17.21",
    "react-number-format": "^4.0.6",
    "react-onclickoutside": "^6.8.0",
    "react-popper": "^1.3.3",
    "react-timeago": "^4.1.9",
    "@types/dompurify": "^2.3.4",
    "dompurify": "^2.4.0",
    "sass": "^1.69.5",
    "typescript": "^5.2.2",
    "vite": "^4.5.0"
  },
  "peerDependencies": {
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-router-dom": "5.1.2",
    "semantic-ui-react": "^0.82.3"
  },
  "devDependencies": {
    "@dcf/rollup-config": "1.14.16",
    "sass": "^1.55.0"
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "yarn lint:fix",
      "git add"
    ]
  },
  "gitHead": "0e7bfef7f1bdad5e5e74a92b1f696eedf84c896a"
}

[jakeboone02]

This looks like an implementation problem. I can't spot exactly what the issue is from what you've posted, but maybe something to do with importing query-builder.css from an SCSS file instead of query-builder.scss?

Can you post a working repo or sandbox that reproduces the issue? You can start with the example here: https://github.com/react-querybuilder/react-querybuilder/tree/v6/examples/basic-ts

[jakeboone02]

I just noticed that react-querybuilder isn't in any of the dependency lists in that package.json. Is it included in one of the @dcf/... deps? Is that a private npm org?

[kellywang1234]

querybuilder

I just noticed that react-querybuilder isn't in any of the dependency lists in that package.json. Is it included in one of the @dcf/... deps? Is that a private npm org?
sorry my bad, this is the correct package.json

[jakeboone02]

It would still help a lot if you could put together a reproduction.

[kellywang1234]

@jakeboone02 Thank you for the suggestion! issues resolved. It is the implementation related issue. i just need to import from the client side rather package level. we can close the ticket now! Again thank you for the quick response!